SummArg | Cursos y recursos para webmasters

08/03/2012

Alojar y embeber tipografías en tu website

La posibilidad de embeber fuentes con @font-face no es precisamente nueva, sino que está disponible desde Internet Explorer 5 en adelante para que se den una idea. Lamentablemente no se hizo popular sino hasta nuestros días, con servicios como Google Fonts y las comodidades de otros servicios que nos ayudan a convertir todo tipo de fuentes para que sean aptas para ser embebidas.

Su modo de uso es muy simple. En el inicio de nuestro CSS insertamos un link a la fuente elegida en formato OTF.

@font-face {
 font-family: Voces;
 src: url('Voces.otf');
 }
 @font-face {
 font-family: Voces;
 font-weight: bold; src: url('Voces-Bold.otf');
 }

Luego la utilizamos en cualquier parte que queramos.

h3 {
 font-family: Voces, sans-serif;
 }

Hasta aquí nada nuevo y todo parece sencillo. Hasta que llegamos al soporte de los navegadores, por supuesto. Firefox, Safari y Opera funciona aceptando fuentes TrueType u OpenType. Internet Explorer funciona con un tipo de fuente llamado Embedded OpenType. Chrome y algunos soportes móviles funcionan mejor con el formato SVG, y hay mas formatos y compatibilidades. Google Fonts utiliza el formato WOFF.

Para simplificarnos la tarea, les queremos presentar el servicio de Font-Face Kit Generator que ofrecen en Font Squirrel. Subiendo nuestra fuente y seleccionando algunas opciones (tenemos un modo básico, optimo y experto), podemos obtener un kit conteniendo: un demo HTML y CSS en donde nos muestra como insertar nuestra fuente en cualquier proyecto; y la fuente convertida a SVG, EOT, WOFF, TTF y SVG. Además de un fix para versiones antiguas de Internet Explorer.

El CSS obtenido será como el siguiente:

@font-face {
 font-family: 'VocesRegular';
 src: url('voces-regular-webfont.eot');
 src: url('voces-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('voces-regular-webfont.woff') format('woff'),
 url('voces-regular-webfont.ttf') format('truetype'),
 url('voces-regular-webfont.svg#VocesRegular') format('svg');
 font-weight: normal;
 font-style: normal;
 }

Luego de corregir las rutas a las fuentes y de copiarlas a nuestro sitio ya podemos empezar a utilizarlas.

Font-Face Kit Generator

 

Dejar un comentario

  1. Consulta. Si la fuente que quiero utilizar originalmente es de dos palabras como “Isa Letter” cuando pongo la URL, tengo que unir los nombres? utilizar un guion bajo? o simplemente dejar el espacio entre ambas palabras? Gracias

  2. Chechu

    Probá uniendo los términos con un signo mas +

Dejar un comentario