El uso de tipografías es totalmente necesario para el armado de un sitio web. Si bien hay varias maneras de utilizarlas, ciertos métodos pueden resultar en una carga extra indeseada para nuestra página web.
A continuación vamos a explicar cómo y por qué es recomendable cargar tipografías en sitios hechos en WordPress utilizando Elementor. De todas formas, estos métodos pueden ser útiles con otros constructores, como por ejemplo en el constructor de sitios Bricks. Al hacer esto podremos conseguir resultados de rendimiento de hasta un 90%.
Para comenzar, vamos a utilizar a modo de ejemplo Google Web Fonts, una de las principales fuentes de tipografías hoy día. Los pasos que seguiremos a continuación no tienen por qué estar basados en tipografías de este sitio.
Tenemos tres formas de cargar tipografías en nuestro sitio web:
- Incrustar el código de la tipografía elegida en Google Web Fonts en el encabezado de nuestro sitio.
- Elegir la fuente deseada dentro del constructor (por ejemplo Elementor), en el listado de tipografías disponibles.
- Instalar nuestras tipografías de manera local.
Hay dos motivos principales por los cuales no cargar tipografías con los métodos 1 y 2 de la lista anterior. El primero es que esos métodos no son compatibles con el RGPD (Reglamento General de Protección de Datos) de Europa debido a que Google recolecta información de nuestros sitios al utilizar sus fuentes de esta manera. El segundo motivo para ser cuidadosos con estos métodos de carga, es el rendimiento. Es por estos motivos que la opción número 3 es la recomendada. En el caso de Elementor, es cuestión de acceder al panel de WordPress e ingresar a “Elementor > Tipografías personalizadas” para poder cargar la fuente que deseemos.
Para conseguir la tipografía que deseamos, en Google Web Fonts, sólo tenemos que buscar la que sea de nuestro agrado y descargarla.
A la hora de elegir tipografías, es importante considerar que tener más de 2 o 3 tipos diferentes de tipografía no es necesario en un sitio web. A su vez, dentro de cada tipografía, las variantes pueden ser muchas más de las que realmente necesitamos.
Veamos por ejemplo el caso de la tipografía Lato. Podemos observar que dispone de un gran número de variables como delgada, ligera, regular, negrita y negra. Es poco probable que si nuestro diseño tiene una aplicación equilibrada de tipografías, utilicemos todas sus alternativas. Por ejemplo en caso de que hayamos utilizado Lato en sus variables Regular y Negrita, sólo necesitaremos descargar e instalar esos archivos. Instalar todas las demás implicaría una carga extra en nuestro sitio web por lo que recomendamos como máximo, cargar 5 variables.
Una vez descargadas las tipografías hay algunas consideraciones a tener para cuidar el rendimiento de nuestra página.
Tal como vemos en la imagen anterior, Elementor nos permitirá cargar las fuentes en hasta 5 formatos diferentes pero cada uno de ellos tiene una implicancia distinta y es aqui donde tenemos que prestar atención.
EOT (Embedded OpenType)
Este es un formato de fuente fue creado para incrustarse en páginas web, principalmente para versiones anteriores de Internet Explorer (IE 6-8). Al ser navegadores tan antiguos, es probable que no sean de utilidad para gran parte del tráfico por lo que no tiene sentido sacrificar rendimiento con este formato.
SVG (Scalable Vector Graphics)
El formato SVG no está dedicado a tipografías sino más bien a íconos y glifos. Un ejemplo de utilidad para este formato podría ser “fontawesome”, una librería de íconos, pero aún asi resulta extraño su uso. Tipografías en este formato pueden resultar pesadas y de esta manera afectar el rendimiento del sitio web.
TTF (TrueType Font)
Este es un formato clásico, de vieja escuela y utilizado por mucho tiempo. Su ventaja es que tiene buen soporte y la mayoría de los dispositivos podrán renderizarla sin problema. Su principal problema es el peso. Es justamente por este motivo, que se desarrollaron los formatos que listamos a continuación.
WOFF (Web Open Font Format)
Este formato fue la solución de Google para reducir el tamaño de los archivos TTF resultando en mejor rendimiento. Todos los navegadores modernos, algunos antiguos e incluso Android soportan este formato.
WOFF 2 (Web Open Font Format 2)
Si bien es similar al formato anteriormente mencionado, en este caso se ofrece una mejor calidad de compresión lo que impactará sin dudas en el rendimiento y tiempos de carga del sitio web en el que se lo utilice. La limitación con este formato es que no es soportado por tantos dispositivos/navegadores como su predecesor.
Ahora que entendemos las características de estos diferentes formatos, ¿con cuales quedarnos?.
Consideramos que el uso de ambos formatos, WOFF y WOFF2, resultan ideales. WOFF2 por lo liviano que es y WOFF como backup en caso de que el navegador en el que se encuentra el usuario no soporte el primero mencionado.
A continuación compartimos el contraste entre un sitio con tipografías en formato TTF y WOFF. En el primer caso el peso de la página es de 878kb mientras que en el segundo, con tipografías optimizadas para rendimiento, el peso del sitio baja a 565kb, una diferencia más que considerable.
A la hora de convertir los archivos TTF descargados de Google Web Fonts, recomendamos utilizar el generador de fuentes de Font Squirrell con la siguiente configuración. En caso de tener algún inconveniente con este conversor, se pueden buscar otros en internet que si bien ofrecen menos opciones, son más simples de utilizar.
