Tipografías externas

Utilizar tipografías en CSS es maravilloso. Permite personalizar nuestra página web con aspectos tipográficos elegantes y atractivos, pero tiene una gran limitación: dependemos de que estén instaladas previamente en el sistema. Si usamos la propiedad font-family y especificamos el nombre de la tipografía a utilizar, en principio debería visualizarse. Sin embargo, si no existen, se mostrará con otra tipografía diferente.

Problemas con las tipografías

Existe una serie de características por las que podemos tener problemas con una tipografía, y que deberíamos tener en cuenta a la hora de utilizarlas. Vamos a analizarlas detenidamente.

Tipografías no instaladas

Las tipografías especificadas en CSS mediante la propiedad font-family deben estar instaladas en el sistema donde se visualiza la página web. De lo contrario, no se visualizarán. Profundicemos en este problema. Considera el siguiente ejemplo de código CSS:

p {
  font-family: Vegur, Georgia, "Times New Roman", 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 que no la tenga instalada en su sistema, la vería con la tipografía Georgia. De no tenerla instalada, la vería con Times New Roman. Esta última tipografía es una tipografía que viene instalada en los sistemas Windows, por lo que vería con esta tipografía si las anteriores fallan.

Tipografías entre sistemas

Por otro lado, imaginemos que ahora visita la web un usuario que utiliza Linux o Mac. Si no tiene las dos primeras tipografías, tampoco tendrá la tipografía Times New Roman, ya que es una tipografía que viene instalada por defecto en sistemas Windows, pero no en sistemas Linux o Mac, por lo que finalmente, utilizaría la tipografía segura «sans-serif» y cargará una tipografía sin serifa.

Esto ha creado una cierta inconsistencia, ya que la tipografía se está viendo de forma diferente dependiendo del sistema, y lo que nos gustaría es que sea lo más consistente posible entre diferentes sistemas y se vea en todos con la tipografía elegida por el diseñador. ¡Hay formas de solucionarlo, como veremos a continuación!

Tipografías con licencias

Muchas tipografías genéricas tienen derechos de autor y no se deberían utilizar en nuestra página web si no hemos pagado su licencia. De la misma forma, muchas tipografías no vienen instaladas de serie en el sistema operativo porque no tienen permiso ni licencia.

Las tipografías que vienen en sistemas Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS...) se verían correctamente en navegadores de usuarios con dicho sistema operativo, pero no ocurriría lo mismo en dispositivos con GNU/Linux o Mac. Y lo mismo con tablets o dispositivos móviles (o viceversa).

En definitiva, aunque tenemos 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ó la regla de CSS @font-face.

La regla @font-face

La regla @font-face permite descargar una fuente o tipografía de una página web, cargarla en el navegador y utilizarla en nuestras páginas aunque no esté instalada en el sistema. Todo ello de forma transparente al usuario, sin que deba 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");
}

La regla @font-face suele colocarse al principio del fichero CSS para avisar al navegador que vamos a utilizar una tipografía que es muy posible que no tenga instalada. 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, opcionalmente, 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.	Bueno
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.	No usar

Consejo: Puede ser una buena práctica utilizar la expresión local() seguida de los formatos WOFF2 y WOFF (en dicho orden), dando así soporte a la mayoría de navegadores, ya que WOFF tiene muy buen soporte. Para dar soporte a navegadores muy antiguos quizás podría ser necesario incluir también el formato TTF.

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 y caché.

OJO: A partir de Chrome 86+ (finales de 2020), este y otros navegadores han comenzado a cambiar su política de caché, que elimina la ventaja de velocidad de CDN que se venía utilizando hasta ahora.

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.

Seleccionar la tipografía

Seleccionamos la tipografía que nos interesa, y de la lista de estilos (generalmente aparecen varios), pulsamos en «Select this style». Esto hará que aparezca una barra lateral, donde nos mostrará un fragmento de código en la zona «Use on the web»:

Preconexión a Google Fonts

Observarás que en el código facilitado por Google hay etiquetas <link rel="preconnect">. Se trata de un fragmento de código para que el navegador haga una preconexión a los subdominios de descarga de las tipografías. Esto hace que el tiempo de descarga sea un poco más corta:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Tipografía de Google Fonts

Existen dos formas de incluir la tipografía en nuestra página. Mediante un fragmento de código HTML, marcando la opción <link>, o mediante un fragmento de código CSS, marcando la opción @import. Veamos el fragmento de código que nos aparece si marcamos la primera, <link> para añadirlo en nuestro código HTML, más concretamente, antes de cerrar la etiqueta </head>:

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

En el código anterior podemos ver:

• Una etiqueta <link rel="stylesheet">, que es un archivo CSS prefabricado de Google con reglas @font-face para cargar la tipografía Open Sans desde sus servidores.

Tipografía con múltiples pesos

Al añadir el código anterior, estaremos incluyendo código CSS para preparar nuestra página para utilizar la tipografía Open Sans con el peso 400 (el peso por defecto). Sin embargo, también podríamos seleccionar varios pesos diferentes de una tipografía:

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

Observa, que en este caso estamos añadiendo la tipografía Open Sans con los pesos 300, 400 y 800. De esta forma, podremos utilizar la propiedad CSS font-weight para indicar que peso concreto queremos utilizar.

Múltiples tipografías

Pero además, también podemos hacer lo mismo añadiendo diferentes tipografías, con diferentes pesos. Por ejemplo, en el siguiente fragmento seleccionamos la tipografía Roboto (con grosor 400), la tipografía Lato (con grosor 300 y 400). El código correspondiente sería el siguiente:

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

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, especialmente importante cuantas más tipografías tengamos.

Nota que en este último ejemplo, en caso de no tener instaladas ningunas de las tipografías anteriores, estaríamos realizando 4 descargas:

1. Descargamos el CSS de Google Fonts.

2. Luego, el navegador lee las reglas @font-face del CSS de Google, y ahí encontrará 3 descargas: la tipografía Lato de peso 300, y la tipografía Lato de peso 400 (son dos archivos diferentes), y la tipografía Roboto de peso 400.

Tipografías mediante @import

Recuerda que también podemos incluir las tipografías en nuestro CSS (en lugar del HTML), seleccionando @import en lugar de <link> en la página de Google Fonts. Normalmente se suele hacer en el HTML porque suele ser ligeramente más rápido, aunque hablamos de tiempos muy pequeños.

/* Código CSS */
@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];400&family=Roboto&display=swap');

Ten en cuenta que Google Fonts te da este código entre etiquetas <style> y </style>. En ese caso, el fragmento de código iría en HTML, pero si lo quieres añadir en CSS, debes eliminar dichas etiquetas y la regla @import siempre debe ir al principio del fichero .css.

Definir la tipografía a usar

Por último, no hay que olvidar que necesitaremos añadir la propiedad font-family al selector CSS que deseemos, como hemos hecho hasta ahora, indicando la tipografía que queremos utilizar. Sin esto, tendremos cargada la tipografía pero no la estaremos utilizando en ningún sitio:

.menu {
  font-family: Lato, Roboto, sans-serif;
  font-weight: 400;
}

El parámetro display con valor swap que aparece en la URL de Google Fonts, corresponde a la propiedad font-display, la cuál se explica 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:

.element {
    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:

.element {
    font: italic normal 400 16px/22px Arial, Verdana, sans-serif;
}