Para el proyecto en el que estoy trabajando actualmente, necesitaba utilizar una fuente variable en formato WOFF2, en concreto es la fuente Inter que al descargarla, tenemos todas las opciones y formatos, por lo que no he necesitado de conversiones, aunque vamos a ver el proceso.
Tengo tres fuentes variables de Inter:
Una para los caracteres «normal» con pesos desde 100 hasta 900, otra para los caracteres «italic» con los mismos pesos y finalmente otra fuente que incluye a ambas (de 0 a 10 grados).
A priori, la tercera fuente me parecía la ideal, pero mirando en https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings veo que además de no estar soportado por Internet Explorer (que ya ni miro), tampoco está soportado por Safari, que se está convirtiendo en el nuevo Explorer.
En este caso es muy típico que el cliente nos acabe diciendo que no se ve en su ordenador; adivinad que navegador utiliza… por lo que hay que darle soporte y para utilizar esta tercera variante deberíamos tener algo similar a esto para nuestra fuente:
* { font-variation-settings: "slnt" 0deg }
em { font-variation-settings: "slnt" 10deg }Así que directamente me decanto por usar las dos fuentes variables:
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: normal;
src: url("inter-roman-var.woff2") format("woff2");
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: italic;
src: url("inter-italic-var.woff2") format("woff2");
}Podría utilizar condicionales para cargar una u otra fuente, por ejemplo:
@supports (font-variation-settings: normal) {
/* aquí el CSS condicional*/
}Pero de momento mientras el soporte para el eje Slant no esté soportado más ampliamente, voy a decantarme por las dos variaciones.
Convertir a WOFF2
Pero vamos al meollo de la cuestión, a lo que veníamos. Hay muchos servicios online para convertir entre diferentes tipos de fuentes, pero no funcionan bien con las fuentes variables.
Para eso me he utilizado WSL2 con Ubuntu 20.04, podría ser otra distro, en un servidor online, máquina virtual en local, etc.
Ahí configuramos que se puedan compilar nuestros programas instalando los paquetes necesarios:
$ sudo apt-get install build-essentialDespués vamos al directorio que deseemos, por ejemplo nuestro /home y descargamos el convertidor woff2 de Google:
$ git clone --recursive https://github.com/google/woff2.gitEntramos en el directorio creado y compilamos:
$ cd woff2
$ make clean allY si todo ha ido bien, ya tenemos en el directorio woff2 tres ejecutables, uno para comprimir nuestras fuentes a woff2 (woff2_compress) y que funciona de maravilla también con las fuentes variables, otro para descomprimirlas (woff2_decompress) y un tercero para obtener información del archivo woff2 (woff2_info).
Si tenemos en ese mismo directorio la fuente Inter.ttf (fuente variable completa que pesa 787 kb.), la podemos convertir de la siguiente manera:
$ ./woff2_compress Inter.ttfY tendremos la fuente variable completa en formato woff2 con un peso de unos 318 kb.
Recordad que lo mío es la programación y no los temas de tipografías, por lo que si he cometido algún error en la terminología o algo de lo aquí expuesto es incorrecto, os agradezco cualquier corrección en los comentarios y si realmente queréis saber más sobre tipografías, fuentes variables y todo el universo del diseño, Ana Cirujano es la persona de referencia a la que deberéis contactar (y contratar).
