View on GitHub

lenguaje-css

Incorporar tipografías

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 principales:

Primer problema:

Las tipografías especificadas en CSS mediante la propiedad 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, incluídas en el sistema operativo) 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 que no la tenga instalada en su sistema, la vería con Georgia (o si no tiene Georgia, con Times New Roman). Por otro lado, un usuario de Linux o Mac, la vería con otra tipografía diferente (una tipografía sans-serif del sistema), ya que probablemente no tendría ni Vegur, ni Georgia ni Times New Roman.

Esto es un problema ya que no permite hacer diseños consistentes con la tipografía elegida por el diseñador. Sin embargo, hay formas de solucionarlo, como veremos a continuación.

Segundo problema:

Muchas tipografías genéricas tienen derechos de autor y puede que algunos sistemas no tengan permiso para tenerlas instaladas.

Las tipografías que vienen en sistemas Windows de serie (Times New Roman, Verdana, Tahoma, Trebuchet MS…) se verían correctamente en navegadores 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). Esto ocurre porque muchas tipografías son propietarias y tienen licencias que permiten usarse sólo en los dispositivos de dicha compañía.

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'),
    url(/fonts/opensans.eot) format('embedded-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

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 versiones antiguas de Internet Explorer y otros navegadores, quizás podría ser necesario incluir también los formatos TTF y 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:

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.

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»:

Select fonts in Google Fonts

Existen dos formas de incluir la tipografía en nuestra página.

  1. Mediante un fragmento de código HTML, marcando la opción <link>,
  2. 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 rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">

En el ejemplo anterior, aparecen dos etiquetas:

Una etiqueta <link rel="preconnect">, que avisa al navegador de que debe ir precargando el servidor de tipografías de Google en segundo plano.

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.

Al añadir este código, 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 rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap">

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.

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 rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&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, 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:

Descargamos el CSS de Google Fonts:

 https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Roboto&display=swap

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.

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:wght@300;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.

Usar tipografías personalizadas 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;
}