La declaración @font-face
La declaración @font-face
nos permite utilizar fuentes personalizadas, como por ejemplo las que podemos importar de fontsquirrel.com o de otros sitios como:
- www.urbanfonts.com
- www.dafont.com/es
- www.fontspace.com
- www.1001freefonts.com (y estos son solo unos cuantos)
La sintaxis utilizada es muy parecida a la de @mediaquery o de @keyframes. Una regla que define las fuentes a utilizar empieza con la palabra clave @font-face
.
@font-face{ font-family: "Fuente Encabezados Grandes"; src: url('ruta/carpetas/fuente.woff') format('woff'); }
La primera parte de la declaración: font-family: "Fuente Encabezados Grandes"
define el nombre de la fuente, que puede ser cualquier cosa. En este caso la llamamos "Fuente Encabezados Grandes" porque la queremos utilizar para los encabezados grandes, pero la podemos llamar como queramos. Utilizamos este nombre para establecer el tipo de fuente de los encabezados ( en este caso ):
h1{ font-family: "Fuente Encabezados Grandes", sans-serif;}
El atributo src
, indica, como sabemos, donde se encuentra alojada la fuente.
La ruta puede ser hacia una carpeta local o hacia una fuente externa como por ejemplo en el caso de las fuentes de Google
@font-face{
font-family: "Fuente Encabezados Grandes";
src: url('ruta/carpetas/fuente.woff') format('woff');
}
En lo que concierne el formato utilizado, en este caso utilizamos woff
– el acrónimo de Web Open Font Format, un formato desarrollado por Mozilla.
El soporte para fuentes 'woff' es muy bueno y casi bastaría con esto, pero la declaración @font-face
soporta atributos src
múltiples, y generalmente las fuentes que podemos descargar por ahí vienen en varios formatos para una mejor compatibilidad con los demás navegadores. Así que una declaración @font-face
puede tener este aspecto:
@font-face{ font-family: "Fuente Encabezados Grandes"; src: url('ruta/carpetas/fuente.eot') format('eot'); src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'), url('ruta/carpetas/fuente.woff') format('woff'), url('ruta/carpetas/fuente.ttf) format('truetype'), url('ruta/carpetas/fuente.svg) format(svg); font-weight: normal; font-style:normal; }
Veamos uno por uno los formatos utilizados:
El formato .eot
( Embedded Open Type ) fue desarrollado por Microsoft y es el único formato reconocido por los navegadores de tipo IE8 y más antiguos.
Al escribir la declaración @font-face
tenemos que hacerlo de tal manera, que cada navegador encuentre el formato que necesita.
Empezamos utilizando el formato .eot
y lo ponemos como único valor del atributo src
.
src: url('ruta/carpetas/fuente.eot') format('eot');
A continuación escribimos esto:
src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'),
url('ruta/carpetas/fuente.woff') format('woff'),
url('ruta/carpetas/fuente.ttf) format('truetype'),
url('ruta/carpetas/fuente.svg) format(svg);
El pequeño parámetro URL, destacado arriba en rojo, hará que los navegadores de tipo IE antiguos ignoren el resto de la declaración.
A continuación viene el formato woff
( Web Open Font Format ) soportado por la mayoría de los navegadores modernos incluso IE > 8.
También hay los formatos .ttf
( TrueType Font ) y .otf
( OpenType Font) muy interesantes sobre todo para los tipógrafos, y el formato .svg
( Scalabe Vector Graphics ) para Safari móvil.
Este es también el formato recomendado por fontsquirrel.com.
@font-face{ font-family: "Fuente Encabezados Grandes"; src: url('ruta/carpetas/fuente.eot') format('eot'); src: url('ruta/carpetas/fuente.eot?#iefix') format('eot'), url('ruta/carpetas/fuente.woff') format('woff'), url('ruta/carpetas/fuente.ttf) format('truetype'), url('ruta/carpetas/fuente.svg) format(svg); font-weight: normal; font-style:normal; }
La propiedad font-display
La propiedad font-display
decide que fuente hay que mostrar ( si hay que mostrar algo ) antes que la fuente definida con @font-face
sea disponible
Ejemplo:
@font-face{
font-family: "Fuente Ejemplo";
src: url('fuente.woff') format('woff');
font-display: swap; }
La propiedad font-display
puede tener como valor una de las siguientes palabras clave:
font-display: auto | block | swap | fallback | optional;
auto: Permite al navegador utilizar el valor por defecto. Esto casi siempre significa que el navegador bloquea el texto ( similar al valor siguiente: block
).
block: El navegador bloquea el texto ( lo oculta ) hasta que la fuente se haya descargado por completo. Esto se conoce como el flash del texto invisible ( flash of invisible text o FOIT).
swap: El navegador utiliza la fuente de substitución hasta que la fuente se ha descargado por completo. Esto se conoce como el flash del texto en crudo ( flash of unstyled text o FOUT).
fallback: Funciona como un compromiso entre block
y swap
. El navegador oculta el texto durante 100ms. Si despues de este tiempo la fuente todavía no se ha descargado el navegador utiliza la fuente de substitución. Cuando la fuente se haya descargado por completo el navegador dejará que pasen unos 3 segundos antes de utilizarla.
optional: Parecido al fallback
. El navegador inicialmente oculta el texto. Después, si la fuente no se ha descargado, utiliza la fuente de substitución. A continuación el navegador comprueba si la fuente se ha descargado. Esta es una operación que afecta el rendimento de la página así que las conexiones más lentas probablemente no llegarán a utilizar la fuente.