Corregir 'Ensure text remains visible during webfont load' - Gatsby - Typography

Corriendo lighthouse sobre el blog, encontré una advertencia sobre el performance de la página, con el mensaje Ensure text remains visible during webfont load.

El problema es que existe un tiempo de carga de las fuentes externas (google fonts en mi caso) y mientras estas fuentes no se encuentren cargadas el texto de la página web es invisible. Esto obviamente no es lo mejor, ya que si por algún motivo la fuente tarda en cargar el visitante no puede leer la página a tiempo y es posible que nos abandone :(.

En la mayoría de los navegadores, si la fuente tarda más de 3 segundos en cargar entonces se aplica la fuente alternativa. Esto se puede observar en el siguiente diagrama simplificado:

Para corregir este inconveniente, se utiliza font-display que determina como y cuando se muestra una fuente.

El valor swap es el que nos interesa, ya que indica al navegador (a la mayoría de ellos) que dibuje inmediatamente el texto con la fuente alternativa pero cambia la fuente en cuanto esta termine de descargarse.

La solución utilizando css es bastante simple, basta agregar font-display: swap cuando carguemos una fuente:

@font-face {
  font-display: swap;

  // cargamos la fuente normalmente
  font-family: "aliceregular";
  src: url("Alice-Regular-webfont.eot");
  src: url("Alice-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("Alice-Regular-webfont.woff2")
      format("woff2"), url("Alice-Regular-webfont.woff") format("woff"), url("Alice-Regular-webfont.ttf")
      format("truetype"),
    url("Alice-Regular-webfont.svg#aliceregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

La solución si estamos cargando una fuente de Google Fonts es agregar display=swap. Ejemplo:

<link
  href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
  rel="stylesheet"
/>

Gatsby Typography con Google fonts

Si bien la solución es bastante sencilla, utilizando el plugin typography de Gatsby no existe la opción de agregar display=swap al url.

La siguiente solución es un hack, y se utilizará solamente hasta que Typography agregue la opción para agregar la opción font-display. Existe un PR que solucionará este problema pero aún no se ha realizado el merge.

La solución implica agregar display=swap (en el array de styles) a la última configuración de fuentes de google:

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  googleFonts: [
    {
      name: "MuseoModerno",
      styles: ["500"],
    },
    {
      name: "Lato",
      styles: ["500", "700&display=swap"],
    },
  ],
  headerFontFamily: ["MuseoModerno", "sans-serif"],
  bodyFontFamily: ["Lato", "sans-serif"],
});

export default typography;

Si estamos utilizando un tema particular (en este caso se utiliza el tema de-young), simplemente agregar la configuración donde sea necesario:

import Typography from "typography";
import deYoungTheme from "typography-theme-de-young";

if (
  deYoungTheme.googleFonts &&
  Array.isArray(deYoungTheme.googleFonts) &&
  deYoungTheme.googleFonts.length > 0
) {
  const fontsLength = deYoungTheme.googleFonts.length;

  const lastFont = deYoungTheme.googleFonts[fontsLength - 1];
  lastFont.styles[lastFont.styles.length - 1] = `${
    lastFont.styles[lastFont.styles.length - 1]
  }&display=swap`;
}

const typography = new Typography(deYoungTheme);
export default typography;

Todo solucionado!!! seguramente tu puntuación con lighthouse será mayor ahora (por lo menos en performance).

Y eso es todo por ahora, Keep coding!!!