Cómo implementar variable fonts

Antes de aprender a implementar variable fonts, tenemos que entender qué son, y para esto primero debemos entender la diferencia entre estilo tipográfico y familia tipográfica.

Un estilo tipográfico es un tipo de letra único y específico, como puede ser regular o bold.

Un estilo tipográfico es un tipo de letra único y específico, como puede ser regular, o regular italic, o bold italic.

Dicho esto, podemos definir a las variable fonts como un solo archivo que contiene todos los estilos. Es decir, podemos tener la familia entera, dentro de un solo archivo.

Ahora si, vamo a codea.

1) Descargar una variable fonts.

Para este ejemplo vamos a descargar Roboto Mono desde Google Fonts.

• Hacemos click en el botón "Download family", eso descargará un archivo comprimido.
• Descomprimimos el archivo.
• Vamos a tener un folder llamado Roboto_Mono y en su raíz un archivo RobotoMono-VariableFont_wght.ttf. Ese es nuestro archivo!

2) Definir la variable fonts.

Una vez que tengamos descargada nuestra font, necesitamos definirlas en nuestro proyecto y para eso usamos la regla @font-face de CSS de tal manera que nos quede algo así:

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/RobotoMono-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 700;
}

Del código anterior, tienes que en cuenta dos cosas:

• Si bien es un archivo .ttf el format es levemente distinto al que estamos acostumbrados.
• En la property font-weight definimos el rango en el cual podemos mover el peso de la font. Acá no podemos definir cualquier valor, sino los que la font acepte. Google Fonts nos indica cuales son estos límites.

3) Usar las font definida.

Ya descargamos nuestra font y ya está definida, lo que resta simplemente es utilizarla y esto se hace igual que con cualquier otra font.

Por ejemplo:

p {
  font-family: 'Roboto Mono';
  font-weight: 548; /* Acá podemos usar cualquier valor entre 100 y 700 */
}

4) Optimizar, siempre optimizar.

Si llegaste a este punto sin problemas y ya tienes tus variable fonts andando, te recomiendo que pases por el post en el que doy algunos consejos sobre cómo optimizar tus fonts.