Fuentes externas

<< font-variant Textos y alineaciones >>

En lugar de depender de los tipos de letra instalados en el sistema del usuario, podemos cargar el/los archivo/s con nuestra propia fuente y obligar al navegador a utilizarla. Estos archivos deberán estar en formato True Type Font (ttf), Vectorial (svg), o OpenType Font (otf). En Internet hay disponibles miles de fuentes así para descargar. Para ello, ponemos la regla @font-face para descargar una fuente de una web y cargarla en el navegador para utilizarla aunque no esté instalada en nuestro sistema. Esta regla se suele poner al principio del fichero CSS.

Para declarar un tipo de fuente a partir de un archivo debemos darle un nombre, e indicar el archivo (puede ser local o en una url), a partir del cual se obtiene la fuente:

@font-face {
     font-family: SuperFuente;
     src: url('fonts/superfnt.ttf');
}

Si disponemos de archivos para negrita o cursiva, por ejemplo, de la misma fuente, se pueden englobar siempre que los declaremos bajo el mismo nombre de fuente, e indiquemos el estilo con font-weight y/o font-style.

@font-face {
     /* Ahora le indicamos que debe buscar la versión en negrita de la fuente anterior*/
     font-family: SuperFuente;
     src: url('fonts/superfnt-bold.ttf');
     font-weight: bold;
}

Finalmente, para usar esta fuente que hemos declarado simplemente, hay que aplicar la propiedad font-family con el nombre personalizado al elemento, por ejemplo:

p {
     font-family: SuperFuente;
}

Otra posibilidad, es utilizar las fuentes externas de Google. Cuando elegimos la fuente a utilizar nos indica el código html que debemos introducir dentro de nuestra etiqueta <head> y el nombre de la fuente a utilizar en la propiedad font-family.

Por ejemplo, imaginad que queremos utilizar la fuente Road Rage, debemos pulsar sobre “Get embed code” y nos aparecerá qué debemos copiar en el head para poderla utilizar, en este caso es:

Además, nos pone el código CSS que debemos utilizar para seleccionar dicha fuente:

p{
    font-family: 'Road Rage', cursive;
}

<< font-variant Textos y alineaciones >>