Regla @font-face de CSS3 y detectar compatibilidad con Modernizr

  • Por
Cómo podemos detectar la compatibilidad del navegador con la regla @font-face, usando Modernizr. Solucionar hipotéticos problemas cuando configuramos en un elemento varias opciones de tipografías, que tienen distintas características.
En el artículo anterior, la Magia de CSS3 de Modernizr, estuvimos explicando cuáles eran las bases utilizadas en Modernizr para detectar la compatibilidad del navegador del usuario con CSS3. Vimos un sencillo ejemplo que creemos vendrá bien complementar con otras prácticas.

En este artículo trabajaremos con el atributo de CSS3 @font-face, que permite utilizar cualquier tipografía en un sitio web, siempre que tengamos el archivo de la fuente. Veremos que en ocasiones unas tipografías se ven menores que otras en la pantalla y cómo hacer para que podamos definir tamaños de texto diferentes cuando el navegador muestra los textos con una u otra fuente de texto.

Regla @font-face y compatibilidad

Comenzamos viendo la regla @font-face, que sirve para definir tipografías para textos, aunque las mismas no estén presentes en el sistema del usuario. Esta regla es propia de CSS3 y para utilizarla debemos de subir el archivo de la tipografía a nuestro servidor, o bien utilizar algún servicio de host de fuentes como Google Fonts, que nos permita hacer uso de una variedad de tipos de letra alojadas en los servidores de Google.

Nota: Google Fonts es lo que se llama un servicio CDN de fuentes. Dispone de más de 200 tipografías alojadas en los servidores de Google que puedes utilizar sin necesidad que estén en tu servidor, directamente enlazando una hoja de estilos que Google te ofrece. Otro servicio popular, alojado por CDN, de tipografías es TypeKit.

Por ejemplo, este código CSS tendremos acceso a la fuente "Tulpen One" alojada en Google Fonts:

@import url(http://fonts.googleapis.com/css?family=Tulpen+One);

Nota: Esa línea está importando una declaración de estilo alojada en Google. En dicha declaración de estilos que se importa es donde aparece el atributo CSS3 @font-face para que los navegadores "descarguen" la fuente que queremos usar en la página. Si accedes con tu navegador directamente a la URL http://fonts.googleapis.com/css?family=Tulpen+One verás el código CSS real que estás importando y allí podrás encontrar la regla @font-face.

Una vez importada la fuente, podemos utilizarla en los elementos que deseemos, por ejemplo:

h1{
   font-family: 'Tulpen One', serif;
   font-size: 1.5em;
   color: #296033;
}

Esos estilos funcionan en todos los navegadores, pero claro, si el del usuario no aceptó el @font-face de Google Fonts, pues simplemente ignorará la fuente 'Tulpen One' y mostrará el texto en "serif" (es la fuente con serifa que tenga configurada el navegador por defecto).

Ahora bien, quiero haceros partícipes de un posible problema. La fuente 'Tulpen One' es más pequeña de lo normal, por lo que el tamaño 1.5em no sería muy bueno para un titular H1 (se vería demasiado pequeño para que visualmente se entienda que es un encabezamiento, Header de nivel 1). Es por ello que merecería la pena saber si nuestro navegador aceptó o no 'Tulpen One', para que en ese caso podamos aumentar el tamaño del texto un poquito más. Es justamente aquí donde podemos aprovechar las bondades de Modernizr, ya que nos permite saber si la regla de estilos @font-face está o no presente en nuestro navegador.

Si @font-face era compatible con nuestro navegador, entonces Modernizr creó, en la etiqueta BODY, una clase llamada "fontface" que podemos utilizar para definir estilos solo para los clientes web que entendieron esa regla de estilos. Por ello, la siguiente declaración será solo tenida en cuenta por los navegadores que están mostrando fuente del encabezamiento con "Tulpen One".

.fontface h1{
   font-size: 2.5em;
}

Como podemos ver, hemos definido simplemente un tamaño de letra mayor, que nos servirá para que los encabezamientos, a los que habíamos definido la tipografía "Tulpen One" tengan un tamaño de letra más adecuado.

Podemos ver un ejemplo de página que hace uso de @font-face y la detección de compatibilidad con Modernizr.

Conclusión

La mayoría de los navegadores actuales admiten @font-face, pero muchos usuarios usan todavía browsers poco actualizados que pueden no tener compatibilidad con esa regla de estilos.

En los casos que queramos aplicar estilos solo para los navegadores que soportan @font-face, disponemos de Modernizr para facilitarnos la vida.

En el siguiente artículo veremos otro ejemplo de detección de compatibilidad con reglas de estilos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jeffsantillan

03/11/2012
Genial
Genial me parcio de gran ayuda lo del Font-Face, no dudare en aplicarlo, yo uso Google WebFonts y claro me ocurrio eso del tamanio disparejo, excelente manual Saludos desde Peru.