Usar fuentes embebidas en nuestras webs

Diseño Web

Para darle un toque más de libreta al blog he pensado en ciertas zonas usar un tipo de letra manuscrita como ya había echo en alguna otra web… anteriormente usaba un plugin llamado TTF Titles que convertía texto en una imagen png pero era usar imagenes inecesarias, otra solución que se me ocurrió fue usar fuentes de google con el plugin WP Google Fonts (que comentaré al final del artículo) pero se puede fácilmente por css con @font-face.

Solo tenemos que tener la fuente ttf  (para internet explorer haría falta exportar la fuente a este formato que se puede hacer desde tt2eot por ejemplo) en nuestra web. Bueno todo depende de lo que se use… en mi caso al estar usando wordpress pues en el directorio fuentes de nuestro tema y añadir al fichero de estilos:

y luego asignar esa fuente  a donde queramos por ejemplo a la etiqueta h1

 

Así nuestras cabeceras tendrán el tipo de letra que les indiquemos. Así me funciona en el chrome, firefox e internet explorer aunque en el chrome el suavizado deja mucho que desear pero encontré en está web como arreglarlo. Tan sencillo como añadir un pequeño suavizado

(NOTA: No se por qué, pero a fecha de me ha dejado de funcionar, bueno por lo menos me acabo de dar cuenta)

 

y la diferencia es más que notable

Suavizado de fuentes en Chrome que usan font-face

En el internet explorer sigue viéndose mal y para ello hay un filtro a aplicar según he leído en esta web. Pero la verdad me da a mí que al final acaba gastando recursos… cuando aprenderá microsoft a hacer cosas decentes…

También he leído por otras webs que algunos navegadores usan otro tipo de formatos que desde Font-Face Generator podemos conseguir si subimos las fuentes que queramos. Está herramienta la verdad es que esta genial pues te genera una hoja de estilos con el código necesario para poner el @font-face en tu web, todos los formatos necesarios y un html donde puedes ver como queda tu página. Veamos un ejemplo, voy a usar SF Scribbled Sans 1.0 para mi web, tras descargarla vemos que hay diferentes tipos para cursiva, negrita, mayúsculas… para este caso usaré  SF Scribbled Sans Bold.ttf  vamos a la página de Font-face Generator y en pulsamos en Add Font y seleccionamos nuestro fichero. Tras marcar la casilla de los términos aparecerá el botón para descargarnos el kit

Font-face GeneratorDespués de descomprimirlo copiamos los 4 archivos de fuentes (ttf,eot,svg,wotf) en la carpeta fuentes de nuestro tema y el contenido de stylesheet.css dentro de nuestra hoja de estilos (en mi caso como la fuente esta dentro de una carpeta añado la carpeta) y a nuestra etiqueta h1 le añadimos la nueva familia de fuente.

 

 

Y todo debería quedar perfecto :)

Para terminar quería comentar sobre el plugin WP Google Fonts que mencioné al principio. Google tiene un directorio de fuentes que permite usarlas sin necesidad de descargarlas al ordenador simplemente usando la ruta absoluta de la fuente. Este plugin “facilita” ese proceso aparece un listado de las fuentes (pero no se puede ver como son asi que habría que ir al directorio de fuentes para ver cual nos gusta) y luego marcamos en donde queremos usarla body, p, h1… pero depende de que temas no funcionará pues lo único que hace es añadir estilo en la cabecera indicando el font-family de nuestros elementos pero igual nuestra hoja de estilos lo sobreescribe. Así que como hacerlo a mano no cuesta mucho… pues mejor así, además si nos gusta alguna de google siempre podemos agregarla normalmente pero en la url poner la ruta que google nos da desde su web.

Deja un comentario

  • (will not be published)


5 + = 7