Question

My current Website-Design is built with the Bootstrap responsive framework. It uses several custom fonts, which make up about 50% of the document size. The fonts are included via CSS, the way of inclusion can not be changed.

My goal now is to stop mobile devices from requesting these fonts, in order to reduce their bandwidth consumption.

Is there a CSS way, like @media (min-width: 480px), to not load the fonts in the responsive layout?

Answer 1

In most implementations, background images that are referenced in CSS media queries get pre-downloaded. (Unless you do some fiddling with your use of display:none;, but that won’t be supported in all browsers.)

The same applies to any fonts you’ve included via media queries — even if they’re specified for a larger/different viewport.*

Why?

This allows for a smoother transition if viewport size is changed, e.g. from portrait to landscape.

Solution?

Considering the constraints you mentioned, I don’t see a clean way to do this only with CSS. You could do something with JS (but make sure it degrades gracefully), or PHP.

But the easiest ways to reduce HTTP requests and how much your visitors have to download include doing one or all of the following:

• Using less fonts, or web-safe fonts instead.
• Using a CDN for fonts.
• Including ‘minified’ font files that only have the characters you’ll
  be using them for.

Check out Google Web Fonts for the latter two.

If you expect or get a lot of mobile traffic that’s important for the site, it’s always worth re-thinking a website’s design and markup from a mobile-first approach: what’s necessary and what isn’t. (That approach can often help to even reduce clutter on the desktop version of your site.)

---

^{* The fiddling approach could be useful for fonts too, but you’d have to do browser testing yourself, as so far it’s undocumented.}