# 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: front-end, css, optimization
- Canonical: https://blog-preview.imfrank.dev/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? Comente \o/

## Posts relacionados

- [Carregando o Disqus ao chegar no fim da página](https://blog-preview.imfrank.dev/pt-br/blog/carregando-disqus-ao-chegar-no-fim-da-pagina/) (2015-07-06): O Disqus é um sistema poderoso de comentários utilizado por milhões de sites na internet.
- [Troquei Tailwind por StyleX. O site não ficou mais rápido.](https://blog-preview.imfrank.dev/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.

---

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://blog-preview.imfrank.dev/llms.txt) e o [sitemap](https://blog-preview.imfrank.dev/sitemap.xml).