Tipografías Web
Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos tal cual (debido a que sólo está en nuestro ordenador por haber sido instalada por alguno de los programas que tenemos).
Es decir, la tipografía de una página web se ve tal y como es si dicha fuente está instalada en el el ordenador del usuario que está visitando la página.
Puesto que no todas las fuentes están disponibles en todos los ordenadores (hay miles de fuentes, y la mayoría no son gratuitas), CSS nos ofrece un mecanismo para utilizar fuentes alternativas: se indica primero la fuente deseada y a continuación todas las que puedan sustituir a la primera, si ésta no estuviera disponible en nuestro PC; la lista debería terminar con el nombre de una familia de fuente (W3C define cinco familias: serif, sans-serif, monospace, cursive y fantasy).
Hay una lista de tipografías estándares que los navegadores más polulares saben interpretar, pero... ¿y el resto de tipografías, las podemos utilizar?. La respuesta es sí, salvando dos inconvenientes: técnico y de copyright; vamos a ver como resolver el primero, el segundo se explica por sí solo.
Desde hace un tiempo existen varias alternativas para poder emplear tipografía "no estandar" utilizando la propiedad @font-face de CSS. No obstante la manera, más rápida y fácil, de utilizar fuentes distintas a las que los navegadores reconocen por defecto es usar la API de Google Font.
La API de Google Font
En Google Font podemos elegir entre más de 800 tipos de letra, y algunos bastante interesantes. Para utilizar una de estas fuentes podemos utilizar 2 métodos:
Método 1: (recomendado)
Añadiendo esta línea dentro del elemento head de nuestro archivo HTML:
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
Evidentemente cambiaremos "Pacifico" por el nombre de la tipografía que deseamos utilizar (estos nombres aparecen en la página de Google Font). Si queremos usar más de un tipo lo indicamos como parametros separados por la barra vertical |.
Método 2:
Añadir esta línea al comenzar nuestro archivo .css
@import url('https://fonts.googleapis.com/css?family=Pacifico');
Se acual sea el método utilizado, después devemos "activar" la tipografía instalada en alguna regla CSS de nuestro archivo de estilos, aquí tienes un ejemplo para los encabezados de nivel 1:
h1 {font-family: Pacifico;}
Es conveniente señalar que si el nombre de la fuente se compone de más de una palabra, es necesario escribir el nombre de la fuente entre comillas, por ejemplo esta tipografía: "PT Sans Narrow".