Tipografías externas

Antiguamente, utilizar tipografías en CSS tenía una gran limitación. Usando la propiedad font-family y especificando el nombre de la tipografía a utilizar, en principio deberían visualizarse. Pero fundamentalmente, existían dos problemas:

Las tipografías especificadas mediante font-family debían estar instaladas en el sistema donde se visualiza la página web.

p {
    font-family: Vegur, Georgia, "Times New Roman", sans-serif;
}

En el ejemplo superior, se han indicado las tipografías Vegur (tipografía personalizada), Georgia y Times New Roman (tipografías de Microsoft Windows) y la categoría segura sans-serif. Un usuario con la tipografía Vegur instalada, vería sin problema el diseño con dicha tipografía, mientras que un usuario de Windows la vería con Georgia (o si no la tiene, con Times New Roman), mientras que un usuario de Linux o Mac, la vería con otra tipografía diferente (una tipografía sans-serif del sistema).

Esto es un problema ya que no permite hacer diseños consistentes, pero hay formas de solucionarlo, como veremos a continuación.

Por otro lado, muchas tipografías genéricas tienen derechos de autor y puede que algunos sistemas no tengan permiso para tenerlas instaladas.

Mientras que las tipografías que vienen en sistemas como Microsoft Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS...) se verían correctamente en navegadores con dicho sistema operativo, no ocurriría lo mismo en dispositivos con GNU/Linux o Mac. Y lo mismo con tablets o dispositivos móviles, o viceversa. Esto ocurre porque muchas tipografías son propietarias y tienen licencias que permiten usarse sólo en dispositivos de dicha compañía.

En definitiva, aunque teníamos los mecanismos, vivimos en un mundo complicado en el que no es tan sencillo establecer una fuente específica para obtener el mismo resultado de diseño en todos los navegadores y sistemas disponibles.... al menos hasta que llegó @font-face.

La regla @font-face

La regla @font-face permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Todo ello de forma transparente al usuario sin que deba instalar o realizar ninguna acción.

Veamos un ejemplo de como se puede utilizar:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'),
        url(/fonts/opensans.woff2) format('woff2'),
        url(/fonts/opensans.woff) format('woff'),
        url(/fonts/opensans.ttf) format('truetype'),
        url(/fonts/opensans.otf) format('opentype'),
        url(/fonts/opensans.eot) format('embedded-opentype');
}

La regla @font-face suele colocarse al principio del fichero CSS para preparar el navegador para descargar la tipografía en el caso de no disponer de ella. En el ejemplo superior lo hemos hecho con la fuente Open Sans, una tipografía libre creada por Steve Matteson para Google y disponible en Google Fonts.

Basicamente, abrimos un bloque @font-face , establecemos su nombre mediante font-family y definimos sus características mediante propiedades como font-style o font-weight . El factor clave viene a la hora de indicar la tipografía, que se hace mediante la propiedad src (source) con los siguientes valores:

Valor Significado Soporte
local('Nombre') ¿Está la fuente 'Nombre' instalada? Si es así, no hace falta descargarla. Todos
url(file.woff2) Formato Web Open Font Format 2. Mejora de WOFF con Brotli. No IE
url(file.woff) Formato Web Open Font Format. Es un TTF comprimido, ideal para web. Bueno
url(file.ttf) Formato True Type. Uno de los formatos más conocidos. Bueno
url(file.otf) Formato Open Type. Mejora del formato TTF . Bueno
url(file.eot) Formato Embedded OpenType. Mejora de OTF , propietaria de Microsoft. Sólo IE
url(file.svg) Tipografías creadas como formas SVG. No usar, considerada obsoleta. Malo

Consejo: Actualmente, una buena práctica es utilizar la expresión local() seguida de la expresión url() con los formatos WOFF2 , WOFF y TTF (en dicho orden), dando así soporte a la mayoría de navegadores. Para dar soporte a versiones antiguas de Internet Explorer, podría ser adecuado incluir también el formato EOT .

Google Fonts

En la actualidad, es muy común utilizar Google Fonts como repositorio proveedor de tipografías para utilizar en nuestros sitios web por varias razones:

  • Gratuitas: Disponen de un amplio catálogo de fuentes y tipografías libres y/o gratuitas.
  • Cómodo: Resulta muy sencillo su uso: Google nos proporciona un código y el resto lo hace él.
  • Rápido: El servicio está muy extendido y utiliza un CDN, que brinda ventajas de velocidad.

En la propia página de Google Fonts podemos seleccionar las fuentes con las características deseadas y generar un código HTML con la tipografía (o colección de tipografías) que vamos a utilizar.

Select fonts in Google Fonts

Todo esto nos generará el siguiente código, que aparece en la zona derecha de la web (en la zona «embed»), y que será el fragmento de código que tendremos que insertar en nuestro documento HTML, concretamente, antes de finalizar la sección <head>:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];400&display=swap">

Cómo se puede ver el ejemplo anterior, al añadir este código estamos enlazando nuestro documento HTML con un documento CSS del repositorio de Google, que incluye los @font-face correspondientes. Esto hará que incluyamos automáticamente todo ese código CSS necesario para las tipografías escogidas, en este caso la tipografía Open Sans con los pesos 300 y 400.

Si además, añadimos también la familia de tipografías Roboto (con grosor 400) y Lato (con grosor 300 y 400), el código necesario sería el siguiente:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lato:[email protected];400&family=Open+Sans:[email protected];400;600&family=Roboto&display=swap">

De esta forma conseguimos cargar varias tipografías desde el repositorio de Google de una sola vez, sin la necesidad de varias líneas de código diferentes, que realizarían varias peticiones diferentes a Google Fonts.

Nota que en este nuevo ejemplo, en caso de no tener instaladas ningunas de las tipografías anteriores, estaríamos realizando 6 descargas: (el css de Google Fonts), (las 2 tipografías con los diferentes pesos de Open Sans), (la de Roboto), (y las 2 tipografías con los diferentes pesos de Lato).

Por último y para terminar, sólo necesitaremos añadir la propiedad font-family: "Open Sans" , font-family: "Lato" o font-family: "Roboto" a los textos que queramos dar formato con dichas tipografías. No te olvides de añadir tipografías alternativas y fuente segura para mejorar la compatibilidad con navegadores antiguos.

El parámetro display con valor swap que aparece en la última versión de Google Fonts, lo explicamos aquí Propiedades avanzadas de tipografías.

No hay que dejar de tener en cuenta que cuantas más tipografías (y/o más pesos) incluyamos en nuestra página, más lenta será la experiencia del usuario, ya que más contenido tendrá que descargar. Salvo excepciones particulares, lo habitual suele ser elegir entre 2-3 tipografías como máximo, cada una con una finalidad concreta: encabezados o titulares, tipografía de lectura normal y tipografía secundaria, por ejemplo.

Atajo para tipografías

Finalmente, algunas de las propiedades más utilizadas de tipografías y fuentes se pueden resumir en una propiedad de atajo, como viene siendo habitual. El esquema es el siguiente:

div {
    font: <style> <variant> <weight> <size/line-height> <family>;
}

Por ejemplo, utilizar la tipografía Arial , con la fuente alternativa Verdana o una fuente segura sin serifa, a un tamaño de 16 píxeles, con un interlineado de 22 píxeles, un peso de 400, sin utilizar versalitas y con estilo cursiva:

div {
    font: italic normal 400 16px/22px Arial, Verdana, Sans-serif;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.