Un posible ejemplo:
/* Importamos fuentes, ¡importante! que este al principio de tu CSS tu @import. */
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
/* Creamos nuestras fuentes */
.poiret {
font-family: 'Poiret One', cursive;
font-size: 30px;
}
.ubuntu {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 30px;
}
<p class="poiret">Soy la fuente Poiret One</p>
<p class="ubuntu">Soy la fuente Ubuntu Condensed</p>
Una alternativa seria usar Font Squirrel y descargar la fuente como .ttf y lo conviertes en una fuente valido para tu web, sería necesario 3 formatos (woff
, eot
, ttf
).
Descargar Poiret .ttf
Descargar Ubuntu .ttf
Una vez descargado las fuentes los conviertes en un formato valido mediante un generador que puedes encontrar en la misma página. Seleccionas modo EXPERT para así seleccionar los 3 formatos necesarios (TrueType
, WOFF
, EOT Lite
).
WebFont generador
Las fuentes que has convertidos los debes incluir a tu carpeta raiz
de tu proyecto web, personalmente crearía una carpeta llamado fonts
para tenerlo organizado.
Carpeta raiz
fonts
- poiretone-regular-webfont.eot
- poiretone-regular-webfont.woff
- poiretone-regular-webfont.ttf
Tu archivo CSS
quedara algo así para añadir nuestra fuente:
@font-face {
font-family: 'poiret_oneregular';
src: url('fonts/poiretone-regular-webfont.eot');
src: url('fonts/poiretone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/poiretone-regular-webfont.woff') format('woff'),
url('fonts/poiretone-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Si deseas usar la fuente */
body {
font-family: 'poiret_oneregular';
}