# Fontes Web — Estratégia de Carregamento

## Regra de Ouro
Nenhuma fonte deve bloquear o render. O browser precisa pintar o primeiro pixel antes de esperar qualquer fonte.

---

## Método 1: Self-hosting (PREFERIDO)

Hospedar woff2 (latin subset) no mesmo domínio/CDN das imagens.

```html
<!-- Preconnect + Preload no topo -->
<link rel="preconnect" href="https://res.cloudinary.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="https://CDN/fonts/inter-latin.woff2">
```

```css
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://CDN/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
```

NUNCA preload cross-origin (fonts.gstatic.com) — mata LCP no 4G simulado.

---

## Método 2: Google Fonts async (fallback)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" media="print"
      onload="this.media='all';this.onload=null;"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
</noscript>
```

NUNCA `@import url(...)` dentro de `<style>` — bloqueia render 100%.

---

## Estratégia por tipo

| Tipo | font-display | Motivo |
|------|-------------|--------|
| Body text | `swap` | Conteúdo legível imediatamente |
| Headings | `optional` | Visual — sem troca = sem CLS |
| Monospace | `optional` | Decorativo |
| CTA buttons | `optional` | Texto curto |

---

## Checklist

- [ ] Fontes woff2 latin subset (self-hosted ou async)
- [ ] Preconnect no topo do documento
- [ ] Zero `@import url()` no CSS
- [ ] `@font-face` fallback com `size-adjust` para cada fonte
- [ ] Stack: `'Fonte', 'Fonte Fallback', generic`
