# Como funciona a propriedade CSS font-display?

> Neste drop explico o propósito e o comportamento de cada estado da propriedade CSS "font-display".

- Canonical: https://betomuniz.com/blog/como-funciona-a-propriedade-css-font-display
- Published: 2020-11-27
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: CSS

---

`font-display` é uma propriedade CSS usada no contexto `@font-face` para controlar o ciclo de vida de carregamento e renderização de _web fonts_.

```css
@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.