# Carregando webfonts apenas nos breakpoints de tablet e desktop

> Técnica simples para otimizar seu site/projeto. Venha descobrir!

- Author: Franklin Javier
- Published: 2015-07-04
- Language: Português (Brasil)
- Tags: frontend, css, performance
- Canonical: https://franklinjavier.com/pt-br/blog/usando-fonte-customizada-apenas-em-desktop/

Usar webfont em seu site/projeto pode ser de fato interessante mas, dependendo do número
de fontes, o peso total da página pode aumentar consideravelmente.
Imagina então se o usuário estiver acessando de um celular?

Pensando nisso, implementei uma técnica simples de otimização nesse blog.
Seguindo o conceito de mobile first, por padrão o ```body``` recebe a fonte Arial e Serif.

```css
body {
  font-family: arial, serif;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora'),
    local('Lora-Regular'),
    url(http://fonts.gstatic.com/s/lora/v9/GsNxiN0oIzsS201cnUag6w.woff2)
    format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
```

Vale ressaltar que o browser só faz a requisição da fonte apenas se for usada
(até o momento o browser não a requisitou).
Agora com o uso de Media Queries, configuramos para usar a webfont **Lora**
assim que sair do breakpoint de mobile.

```css
@media (min-width: 768px) {
  body {
    font-family: 'Lora', arial, serif;
  }
}
```

Pronto. Redimensione seu brower até ver a diferença.

Simples, não? Me conta no [X](https://x.com/franklinjavier) \o/

## Posts relacionados

- [Troquei Tailwind por StyleX. O site não ficou mais rápido.](https://franklinjavier.com/pt-br/blog/stylex-nao-deixou-o-site-mais-rapido/) (2026-08-25): Migrei um site com nota 100 no PageSpeed para StyleX, medi o resultado e descobri que o ganho real estava em outro lugar.
- [O que performance web realmente significa em e-commerce](https://franklinjavier.com/pt-br/blog/performance-web-ecommerce/) (2024-03-20): Tiramos uma loja de 15s para 3s em 3G lento e a conversão subiu 45%. O que medir, para onde o tempo realmente vai, e por que os maiores ganhos costumam ser remoções.
- [Entrevista de Arquitetura Frontend](https://franklinjavier.com/pt-br/blog/entrevista-arquitetura-frontend/) (2023-02-26): Perguntas e respostas comuns em entrevistas sobre arquitetura frontend, performance, segurança e habilidades interpessoais

---

Todas as páginas deste site também estão disponíveis em markdown: solicite qualquer URL com o header `Accept: text/markdown`. Veja o [llms.txt](https://franklinjavier.com/llms.txt) e o [sitemap](https://franklinjavier.com/sitemap.xml).