soy Kseso y esto EsCSS

@font-face: 2 apuntes breves si la usas

2 apuntes breves para optimizar y evitar problemas al usar tipografías no safety con los servicios de Google Fonts y We Love Icon Fonts

@font-face: 2 apuntes breves si la usas

·Por Kseso ✎ 6

imagen con tipografíaEl servicio de google fonts se ha vuelto cuasi imprescindible para la mayoría de creadores de webs que desean utilizar tipografías "no sáfety fonts" o "fuentes no seguras" de una forma sencilla y económica.

Como complemento a este servicio y supliendo una carencia que creo imperdonable e incomprensible a estas alturas por parte de Google, We Love Icon Fonts hace lo mismo pero con tipografías de iconos.

Pues un par de apuntes breves sobre ellos:

Google Fonts y font-style

Muchas de las tipografías facilitadas por el API de Google Fonts incluyen múltiples estilos, que es como llama a las variaciones de las propiedades font-style y font-weight disponibles en cada una.

Si seleccionas una en la variante italic, aunque sea la única elegida, como:

<link href='http://fonts.googleapis.com/css?family=Exo:300italic' .../>

Debes tener presente lo siguiente para que Chrome la muestre:

Es obligatorio incluir la declaración font-style: italic; en cada selector donde declaremos esa familia tipográfica.
De no hacerlo así, Chrome no renderiza el texto con esa tipografía.

We Love Icon Fonts y su forma de inclusión

Este servidor remoto de tipografías de iconos ofrece por defecto y de forma única como llamada a la tipografía la forma @import para incluirla en el inicio de la hoja de estilos.

@import url(http://weloveiconfonts.com/api/?family=zocial);

Esta forma es la que más peligros entraña y la más desaconsejada de todas las posibles. Siempre es preferible hacerlo mediante link, si es posible.

Para hacerlo de esta manera sólo tienes que cambiar la regla @import ofrecida por el servicio por la forma <link href='...'.

Así, tomando la @import del antes como ejemplo quedaría transformada en:

<link href='http://weloveiconfonts.com/api/?family=zocial' .../>

Fíjate que la ruta es la misma, sólo cambia el parámetro url por href y y como es lógico la forma de indicar la dirección de destino.

No lo he testeado a fondo el cambio. En principio no he notado problemas en su uso, y sí quizás una pequeña mejora en la carga de los archivos necesarios para usar sus tipografías.

Lecturas complementarias

  1. "We Love Icon Fonts" servidor remoto de fuentes de iconos a fondo
  2. @Font-face y sus problemas. Guía de uso y solucción de problemas
  3. Optimiza @font-face con google fonts: más livianas, más rápida la carga
  4. Adobe Edge Web Fonts a fondo.

avatar del Editor del blog
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso