# Loading webfonts only on tablet and desktop breakpoints

> Simple technique to optimize your site/project. Come discover!

- Author: Franklin Javier
- Published: 2015-07-04
- Language: English
- Tags: frontend, css, performance
- Canonical: https://franklinjavier.com/blog/loading-webfonts-desktop-only/

Using webfonts on your site/project can indeed be interesting but, depending on the number
of fonts, the total page weight can increase considerably.
Imagine then if the user is accessing from a mobile phone?

Thinking about this, I implemented a simple optimization technique on this blog.
Following the mobile first concept, by default the `body` receives the Arial and Serif font.

```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;
}
```

It's worth noting that the browser only makes the font request only if it's used
(so far the browser hasn't requested it).
Now with the use of Media Queries, we configure to use the **Lora** webfont
as soon as it leaves the mobile breakpoint.

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

Done. Resize your browser to see the difference.

Simple, right? Tell me on [X](https://x.com/franklinjavier) \o/

## Related posts

- [I replaced Tailwind with StyleX. The site didn't get faster.](https://franklinjavier.com/blog/stylex-personal-site/) (2026-08-25): I migrated a site that already scored 100 on PageSpeed to StyleX, measured the result, and found the real performance win somewhere else.
- [What web performance actually means in e-commerce](https://franklinjavier.com/blog/web-performance-ecommerce/) (2024-03-20): We took a storefront from 15s to 3s on throttled 3G and conversion went up 45%. What to measure, where the time really goes, and why the biggest wins are usually deletions.
- [Frontend Architecture Interview](https://franklinjavier.com/blog/frontend-architecture-interview/) (2023-02-26): Common interview questions and answers about frontend architecture, performance, security, and interpersonal skills

---

Every page on this site is also available as markdown: request any URL with the `Accept: text/markdown` header. See [llms.txt](https://franklinjavier.com/llms.txt) and the [sitemap](https://franklinjavier.com/sitemap.xml).