Importar una fuente no disponible en el navegador (@font-face)

La regla @font-face se asocia típicametne a CSS3 pero muy pocos se acuerdan de que estaba disponible en CSS2, aunque sus limitaciones, principalmente en los formatos aceptados, hacían que apenas se usase. La principal actualización de esta regla en CSS3 fue precisamente la de aceptar más formatos, como .eot, .ttf, .otf y .svg, lo que hizo posible un soporte más universal entre navegadores.

Con la regla @font-face, los diseñadores web ya no tienen que utilizar una de las fuentes "seguras para la web".

En la regla,  @font-face primero debe definir un nombre para la fuente (por ejemplo, myFirstFont) y luego apuntar al archivo de fuente.

Para usar la fuente para un elemento HTML, consulte el nombre de la fuente (myFirstFont) a través de la propiedad font-family:

Sintaxis

La sintaxis de font-face es ls la siguiente:

Propiedades obligatorias

• font-family  Es el nombre de la fuente y es el mismo que luego se definirá como valor en para la regla font-family en el elemento que deseemos utilizarla. Debería ir entre dobles comillas o comilla simple aunque si el nombre no contiene espacios puede escribirse sin comillas.
• src Se ha de definir al menos una URL dónde está ubicado el archivo de la fuente para poder importarla. Se pueden especificar varias rutas, cada una en una declaración url() y separada por una coma de la siguiente. Esto es útil para definir la ubicación de la misma fuente en diversos formatos y así maximizar la compatibilidad entre navegadores. Recuerda que las declaraciones url() admiten URLs parciales o absolutas y que las parciales se interpretan de forma relativa al stylesheet, no al documento HTML. También admite la declaración local('nombre fuente') para decirle al navegador que intente buscar entre las fuentes locales antes de descargar el archivo y ahorrar así tiempo y ancho de banda.

• font-weight Peso o fuerza de la fuente a utilizar. Puede ser normal, bold o los números 100, 200, 300, 400, 500, 600, 700, 900. El valor por defecto es normal.
• font-style Define como se va a estilizar la fuente. Puede ser normal, italic, oblique. El valor por defecto es normal.
• font-stretch Define como se a «estirar» la fuente. Puede ser: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded. El valor por defecto es normal.

@font-face es soportado por todos los navegadores, incluso versiones bastantes antiguas, pero no todos los navegadores admiten la fuente en los mismos formatos. Por ejemplo, Internet Explorer por debajo de la versión 9 sólo admite formato OET (Embedded Open Type) y a partir de la versión 9 soporta los formatos WOFF y TTF/OTF. Por otro lado, ninguno de los demás principales navegadores soporta fuentes OET.

Para solucionar esto se suele recomendar declarar un lista de ubicaciones con la misma fuente en distintos formatos, de modo que cada navegador utilice la que pueda. Si sólo dispones de la fuente en un formato puedes utilizar cualquiera de las múltiples herramientas gratuitas de conversión, por ejemplo font2web.com. Hay que tener en cuenta que la ubicación del formato OET ha de ir la primera, ya que IE cargará el archivo de la primera ubicación que encuentre aunque sea de un formato que no soporte. Un ejemplo de font-face con máxima compatibilidad entre navegadores:

Si no estás interesado en dar soporte a Internet Explorer por debajo de la versión 9 puedes optar por utilizar sólo los formatos WOFF, que soportados por todos los navegadores desde versiones relativamente tempranas. Algunos servicios de webfonts, como Google Fonts, ofrecen únicamente formato WOFF o WOFF2:

Algunos ejemplos más

Imaginemos que vamos a utilizar dos fuentes, la fuente Raleway en dos variantes, normal e italic, más la fuente Bungee Inline. Hay que hacer un font-face por cada variante, así que en total tendríamos que hacer tres font-face:

Ahora, podríamos utilizar Raleway normal para todo el y crear selectores CSS para elementos en los que queramos utilizar las otras tipografías:

Pero, como las propiedades CSS se heredan, el código anterior se podría quedar en:

Veamos un ejemplo