fuentes seguras en web
comment 0

Añadiendo tus fuentes seguras a tu proyecto web – Clase 8

En la web, las fuentes seguras tienen como objetivo garantizar que nuestro proyecto web mantiene la tipografía que hemos elegido para el, independientemente de que el usuario que está visualizando el proyecto tenga la fuente instalada y disponible en su ordenador.

Para ello, y tal y como vimos en la anterior clase del curso de programación web desde cero, podemos utilizar el servicio de Google Web Fonts. Así podemos cargar cualquier tipografía disponible en el servicio de Google y colocarlo en nuestra web con una simple línea de código.

Pero ¿qué ocurre cuando el catálogo de Google se nos queda corto y tenemos que utilizar una fuente que no está disponible?

En ese caso siempre podemos utilizar nuestras propias fuentes o las que hayamos comprado para nuestro proyecto y subirlas a nuestro servidor junto con el resto de archivos del proyecto.

En este artículo vamos a ver, paso a paso, como crear todos los archivos que necesitamos para utilizar nuestras propias fuentes en cualquier proyecto web.

1.- Truetype y Opentype, o lo que es lo mismo, Mac contra Windows

Antes de nada debemos saber que existen diferentes tipos de archivos de fuentes o tipográficos.
Y destacan dos sobre todos los demás: TTF (True Type) y OTF (Open Type).

El archivo de tipo Truetype fue desarrollada por Apple a finales de los 80, debido al gran interés de Steve Jobs en que el sistema operativo de los Mac mostrara una tipografía bella.
Truetype se caracteriza por el sistema de renderizado de la fuente de forma vectorial para que los arcos sean visualizados de forma precisa.

Microsoft intentó implementar este sistema para su software Windows, pero al no llegar a un acuerdo no tuvieron más remedio que desarrollar su propia tecnología en los 90.
A este proyecto se unió más tarde Adobe, y entre ambas compañías lo bautizaron con el nombre de Open Type.

Ese es uno de los motivos por los cuales jamás verás bien una fuente decente en Windows.

2.- Creando los archivos que necesitamos con Font Squirrel

Pues bien, para poder colocar nuestras fuentes en nuestro proyecto web necesitaremos como mínimo nuestra fuente en alguno de los dos tipos de archivo, otf o ttf.

Pero con eso no basta. Otro día os contaré la historia de Microsoft Internet Explorer de como renderiza las fuentes hasta Internet Explorer 8 y porqué existe el formato de archivo de fuente eot.

Solo deciros que todavía necesitamos algunos archivos más. Con ttf y otf no basta.
Aquí es donde cobran todo el sentido plataformas como Font Squirrel.

Home de Font Squirrel

Font Squirrel es un servicio web que, a partir del archivo de nuestra fuente, ya sea en ttf u otf, creará por nosotros el resto de archivos que necesitamos para que todos los navegadores del mercado puedan mostrar decentemente nuestras tipografías.

Unas veces con más éxito que otras, todo hay que decirlo. Estos formatos son: wof, wof2, svg y eot.

Todos estos archivos generados por FontSquirrel tendremos que subirlos a nuestro servidor junto con el resto de archivos y carpetas de nuestro proyecto.

Yo generalmente las incluyo en una carpeta ‘fonts’, pero vamos, son manías de viejo.

3.- Ejemplo de instalación de fuentes seguras

Como siempre, nada mejor que un pequeño ejemplo para ver con claridad como se realiza todo el proceso. Ya verás que es sencillo y muy rápido de implementar.

Vamos a empezar creando un html básico con un header en cuyo interior ponemos un h1 y un h2:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>Clase 8 Curso de Programación web desde Cero de Incoming Startup</title>
</head>
<body>
<header>
	<h1>This is a Title</h1>
	<h2>This is a Subtitle</h2>
</header>	
</body>
</html>

Nuestro index.html se ve así en nuestro navegador al abrirlo:

Nuestro index.html el ejemplo en Chrome

Nuestro index.html el ejemplo en Chrome

Ahora vamos a localizar los archivos de nuestra fuente.
Si la compraste en algún proveedor de fuentes online tendrás los archivos en el formato en el que se distribuya, otf o ttf.

Si la tienes ya instalada en el sistema, para encontrarlas en OSX tienes que ir al directorio de Usuario/Libreria/Fonts
En esa carpeta de la librería se encuentran todas las fuentes del sistema. Encontrarás tanto otf como ttf.

Es posible que la carpeta de Librería esté oculta, para visualizarla no tienes más que seguir este tutorial.

Para nuestro ejemplo he elegido Myriad Set Pro Thin para el h2 y Myriad Set Pro Semibold para el h1.

Una vez localizado el archivo de fuente que necesitamos vamos a fontsquirrel.com y en el menú de navegación señalamos la opción de “Generator”.

Panel de Generación de archivos de fuentes.

Panel de Generación de archivos de fuentes.

En esta pantalla le damos al botón de “Upload Fonts” y elegimos en el explorador los archivos de las fuentes que queremos usar. Font Squirrel nos obliga de forma activa a señalar que tenemos licencia de las mismas y tenemos derecho del autor.

Botón para subir tu fuente y generar los archivos necesarios.

Botón para subir tu fuente y generar los archivos necesarios.

Una vez subidos los archivos de las fuentes, y una vez declarado que nuestra fuente es legal, ya podemos darle al botón de “download your kit”.

Botón para descargar archivos generados.

Botón para descargar archivos generados.

Font Squirrel nos genera una carpeta comprimida con todos los archivos que necesitamos y que podemos ver en esta imagen:

Archivos que contiene la carpeta descargada de Font Squirrel.

Archivos que contiene la carpeta descargada de Font Squirrel.

Un html demo para ver como renderiza nuestra fuente, nuestra fuente en todos los formatos necesarios para que todos los navegadores las puedan renderizar, y un archivo stylesheet.css que contiene todo el código que necesitamos para implementar nuestra fuente en nuestro proyecto.

En mi caso voy a mover ese archivo a la carpeta principal, y voy a crear una nueva carpeta llamada fonts donde voy a colocar todos los archivos.

Ahora en nuestro index, enlazamos el css donde tenemos declaradas las familias de fuente que hemos creado usando una etiqueta link:

<link rel="stylesheet" href="stylesheet.css" type="text/css">

Es importante que nos acordemos de cambiar la ruta donde se encuentran las fuentes que nos hemos descargado ya que ahora están en la carpeta fonts.
Para hacer esto es muy útil Sublime Text y el plugin de Emmet, ya que podemos tener un editor múltiple usando Cmd + D, y cambiarlo todo a a vez.
La ruta de los archivos de fuentes pasa a ser de esta:

Ruta de archivos original

Ruta de archivos original

A esta:

Ruta final y válida

Ruta final y válida

Para usar nuestras fuentes, en nuestro style.css solo tenemos que hacer:

h1{
   font-family: 'myriad_set_prosemibold';
}

h2{
   font-family: 'myriad_set_prothin';
}

fuentes seguras instaladas

Y voilá, ya tenemos nuestra fuente instalada.

Conclusión

Como veis, es muy sencillo y rápido adjuntar nuestras fuentes a nuestros proyectos en caso de que la fuente elegida no se encuentre dentro del catálogo de Google web fonts, o -importante- en el caso de que la fuente de Google Fonts renderice de forma espantosa, cosa que suele suceder con más frecuente de la deseada (¿Verdad, Lato?).

¿Te ha parecido útil? ¿Alguna duda o sugerencia? No dudes en utilizar la sección de comentarios.

Para la siguiente clase, que ya será la 9 de este curso de programación web desde cero, vamos a ver un tema muy interesante e importante en la web actual: Los iconfonts.
Osea, utilizar iconos como si fueran fuentes, con todas las ventajas que esto nos aporta, sobretodo de cara a optimización, renderizado, etc.

Recuerda que puedes suscribirte a nuestra newsletter para estar al día de cuando se suben nuevas publicaciones en el blog, así como noticias destacadas.

Post Relacionados:

Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.
Clase 7, Instalando fuentes desde Google Web Fonts.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply