Importar tipografías en un HTML con CSS y @font-face

La verdad es que durante mucho tiempo he estado buscando información sobre cómo importar fuentes externas en los diseños HTML, y después de muchas búsquedas (algunas infructuosas o que no me llevaban a ningún sitio), he encontrado dos formas muy sencillas de realizar este trabajo.
· Google Fonts
· Font Squirrel

Normalmente se suelen incorporar utilizando varias técnicas, pero al final casi todas requieren del uso de @font-face en los estilos CSS. En algunos casos acababa encontrando conversores especiales de fuentes al formato EOT que sólo se veían en Internet Explorer, o en otros casos soluciones parciales que no se visualizaban en todos los navegadores.


GOOGLE FONTS
El uso de esta forma de implementar tipografías poco comunes es muy sencillo. Simplemente accedes a http://www.google.com/webfonts, buscas la fuente en una extensa lista disponible, y te mostrará el código que debes incluir en tu página para poder utilizarla (en formato <link type='text/css' >).

PROS:
· Uso sencillo
· Dispone de un buscador
· No necesita licencia
· Es compatible con todos los navegadores
CONTRAS:
· Algunos podrían decir que no dispone de demasiadas fuentes


FONT SQUIRREL
Font Squirrel es una magnífica aplicación con la que tendréis un generador de fuentes para su importación, totalmente gratuito y de muy fácil implementación (yo ya llevo un tiempo utilizándolo y puedo deciros que no me ha fallado en ningún navegador).
Os aseguro que hará las delicias de todos aquellos que queráis dar una "pinta especial" a vuestras webs.

Podéis acceder al generador a través de: http://www.fontsquirrel.com/fontface/generator

Mediante un sencillo interfaz podréis incorporar varias fuentes al generador, y el sistema creará un archivo descargable con todos los elementos necesarios para su uso. Dentro de dicho archivo también encontraréis ejemplos de código y vistas previas del resultado final.

PROS:
· Permite la conversión de cualquier fuente
· Es compatible con todos los navegadores
· En el archivo descargable vienen ejemplos de uso
CONTRAS:
· Se debe tener licencia legal sobre las fuentes a utilizar.
· Aunque es muy sencillo de utilizar, es posible que requiera de un conocimiento básico de CSS y HTML para no tener problemas al usarlo.


NOTA: Aunque es un servicio gratuito, siempre podréis donar un dinerillo para que siga en marcha.

Un saludo, y hasta la próxima.

1 comentario:

  1. Muy útil, ya que, siendo un problema recurrente, rara vez se habla de ello.
    Pequeñas soluciones a pequeños problemas, es la forma de encarar cualquier proyecto :)

    ResponderEliminar