El tiempo de estar limitados a las Web Safe Fonts ha llegado a su fin. De la mano de @FontFace y CSS3 ahora podremos utilizar una variada gama de fuentes en nuestros proyectos Web. Pero no todo es color de rosas en este mundo, para empezar es importante conocer cuáles son las ventajas, desventajas y qué temas deberemos tener en cuenta al usar esta característica.
Dentro de la renovación y actualización que propone CSS3, @FontFace es una de las grandes estrellas para los diseñadores Web. Mediante esta característica es posible «escapar» a la limitación de las «Web Safe Fonts», es decir las tipografías típicas que el usuario tiene instaladas en su equipo, y comenzar a aprovechar una mayor variedad de fuentes.
Para lograr esto es necesario tener alojadas las tipografías que se deseen usar en Internet y crear la regla CSS, como vemos en el ejemplo a continuación:
@font-face {
font-family: NombreFuente;
src: src: url(ihttp://misitioweb.com/fonts/fuente.woff) format("woff"),
url(https://misitioweb.com/fonts/fuente.ttf) format('truetype');
}
Vale la pena destacar que cuando declaramos la familia es necesario indicar el nombre exacto que tiene la fuente según tiene definido dentro de sus características y que al especificar el src deberemos indicar la ruta donde se encuentra la tipografía. En la actualidad deberemos indicar más de una línea con src, para poder brindar compatibilidad con los diferentes navegadores y sistemas.
Deteniéndome en el punto anterior, es un tema importante que suelo remarcar en mis clases al explicar @FontFace, y es que resulta necesario publicar las fuentes en formatos para diversos dispositivos y navegadores:
- TrueType es compatible con Firefox 3.5+ , Safari 3.1+, Chrome 4+ y Opera 10+.
- EOT es compatible con Internet Explorer 4 o superior.
- WOFF nos brinda compatibilidad con Firefox 3.6+, Internet Explorer 9+ y Chrome 5+.
- Para iPad and iPhone deberemos usar fuentes en SVG
Como podemos ver en esa lista, el grado de compatibilidad es bastante alto. Algo que podremos verificar si ingresamos en el sitio When Can I Use.
Una vez que la tipografía es declarada con la regla @FontFace, puede utilizarse en cualquier momento, como cualquier otra tipografía. A continuación veremos una regla CSS para aplicar una nueva familia tipográfica a un párrafo :
p {font-family: 'Nombrefuente', Arial, sans-serif;}
¿Aspectos a tener en cuenta?
- Licencia: es muy importante tener presente que las tipografías cuentan con licencias de uso y debemos leer y respetar dicha licencia antes de colocar una tipografía en Internet. No es lo mismo cuando se aplica una tipografía a una obra impresa que en el caso de incluirla en un sitio Web o un software.
- Formatos: como vimos anteriormente, por compatibilidad, será necesario subir una fuente en diferentes formatos. Una buena opción para obtener fuentes en diversos formatos es la que nos brinda @FONT-FACE Generator de Fontsquirrel. Aquí vale destacar una vez más, que antes de subir una fuente y convertirla, deberemos confirmar que tenemos los derechos legales para realizar este proceso.
- Testing: al utilizar esta característica resulta de gran importancia realizar pruebas en diferentes navegadores y sistemas operativos, ya que en algunos casos las tipografías pueden mostrar problemas (algunas fuentes pueden mostrarse pixeladas, rotas o con otros inconvenientes).
¿Dónde obtener fuentes? Fontsquirrel nos ofrece una buena variedad de Kits de fuentes. Cada Kit cuenta con la fuente en todos los formatos necesarios, un archivo .html y un .css con la demostración de como aplicar el estilo y la manera de utilizar @font-face. Además, en cada kit encontraremos un archivo con los datos de licencia de cada fuente para poder verificar en qué tipo de proyectos pueden utilizarse.
Una alternativa interesante que podremos encontrar es la que nos ofrece Google Web Fonts. Aquí encontramos más de quinientas fuentes Open Source, que pueden emplearse en proyectos Web o impresiones. Google ofrece una API para trabajar desde Internet sin necesidad de descargar las fuentes, ahorrándonos parte del trabajo.
Para quienes deseen saber más sobre el uso de fuentes en Internet con @Font-Face es recomendable leer el documento que brinda el W3C, bajo el título CSS Fonts Module Level 3.
Sobre aspectos legales del uso de tipografías en Internet es recomendable leer los artículos: Web Fonts and the Law y Typefaces: What license applies to fonts embedded in mobile apps?.
¿Te interesa capacitarte en desarrollo Web con HTML5 y CSS3? Estés en el lugar donde estés, puedes contactarme.