Antes de nada empezare contando un poco de historia sobre las tipografía en el diseño web.
Hace no tanto tiempo muchas páginas web se diseñaban con tipografías seguras, estas tipografías son aquellas que podemos encontrar en cualquier equipo, ya sea Mac, Windows o Linux. Tan solo 11 tipografías coinciden en los tres sistemas.
Las tipografías seguras son las siguientes: Arial, Comic Sans, Courier New, Georgia, Impact, Lucida, Palatino, Tahoma, Times New Roman, Trebuchet y Verdana.
La verdad que con solo 11 tipografías no se podia dar rienda suelta a la creatividad y aparecieron nuevas formas de insertar cualquier tipo de tipografía.
Por eso Google, hace ya unos años, saco su nuevo servicio de Google Fonts. De forma que las cosas se han simplificado mucho. Ahora los profesionales del diseño web solo necesitamos acceder a Google Fonts, elegir una tipografía entre las más de 600 disponibles en su base de datos y seguir sus instrucciones para insertarla en la página web.
¿Que ocurre cuando la identidad corporativa en la que estamos trabajando requiere que usemos una tipografía determinada?
Puede que Google Fonts no contenga esta tipografía, en este caso sera necesario guardarla en el servidor para que el usuario pueda descargarla sin problemas.
En este escenario debemos usar la propiedad @font-face de CSS.
Tan solo debemos insertar en nuestro CSS el siguiente código:
@font-face {
font-family: mi_fuente_especial;
src: url(una_fuente.otf);
}
Una vez introducido este código podemos usar la fuente por el nombre en cualquier elemento. Por ejemplo:
h1 {
font-family: mi_fuente_especial, Helvetica, Arial, sans-serif;
}
Así cuando llamamos de esta forma el usuario estará descargando la fuente y podrá ser visualizada sin problemas. Los usuarios descargaran la fuente y esta será mostrada sin problemas en el diseño web. En caso de querer usar dos fuentes diferentes repetiremos el código entero por cada fuente que queramos añadir.
