⛲️ font-display é uma propriedade CSS usada no contexto @font-face para controlar o ciclo de vida de carregamento e renderização de web fonts.

@font-face {
  font-family: "Custom";
  src: url("/fonts/Custom-webfont.woff2") format("woff2"),
       url("/fonts/Custom-webfont.woff") format("woff");
  font-display: block;
}

💡 Ao declarar font-display, podemos configurar quando e como exibir textos baseado nos seguintes modelos:

✍️ auto: Deixa o comportamento de exibição de web fonts customizadas com o browser.

✍️ block: Faz com que o browser desenhe o texto sem exibí-lo até que a web font customizada carregue completamente.

✍️ swap: Exibe o texto com uma web font alternativa previamente configurada até que a web font principal seja carregada.

✍️ fallback: Coloca o browser num estado intermediário aos modos auto e swap ao tratar com a web font decarada, pois faz com que o texto seja ocultado por 100ms, e se a web font principal não foi carregado nesse tempo, exibe uma web font alternativa previamente configurada por 3 segundos, e se nesse tempo a web font principal não for carregada, mantem a fonte alternativa.

✍️ optional: Tem mesmo comportamento do modo fallback, porém leva a velocidade de conexão e dispositivo do usuário em consideração e exibe o que for mais conveniente pro contexto.