@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.

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 Don Kseso Kseso

Comentarios: 6

  1. Es recomendable usar este tipo de fuentes en las versiones para moviles?

    ResponderEliminar
    Respuestas
    1. Todo depende, George
      Si lo preguntas por el soporte, pasa por el artículo sobre @font-face y sus problemas.
      Si es por el peso y peticiones extra... en cada caso habrá que evaluarlo.

      Creo que ya lo he dicho unas cuantas veces: la cuestión tipográfica y todo lo asociado a ella es tan importante (o quizás más) que los colores o la distribución elegida.

      Un saludo

      Eliminar
  2. Perdón que no tenga nada que ver con el post, pero es la primera vez que entro a tu pagina y el diseño es raro y alocado, pero a la vez me gusta porque no solo es lindo sino también funcional. Solo te quería decir eso te felicito.

    PD: ahora voy a ver un poco el contenido, pero en diseño un 9.5

    ResponderEliminar
  3. ¿De qué forma cargan más rápido las fuentes y tienen mejor compatibilidad: importando el CSS de otra página con <link> o copiando ese CSS (@font-face) a nuestra hoja de estilos?

    ResponderEliminar
    Respuestas
    1. Podría decirse, Jorge, que el soporte a @font-face es "universal" utilizando los archivos oportunos para cada familia de navegadores.

      En cuanto a la velocidad: depende de muchos factores, unos particulares de cada sitio y otros generales. Como el número de peticiones y la velocidad de respuesta del servidor.

      Siempre puedes hacer tus pruebas y ver los resultados en el inspector de código del navegador.
      Con pequeñas diferencias y algunas características particulares de cada uno, el de Opera, Firefox y Chrome ofrecen mucha y muy buena ayuda.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap