Clever Geek Handbook

Can I Load Fonts in CSS Optional for Mobile?

My current website design is built with the responsive Bootstrap framework. It uses several custom fonts that are about 50% of the document size. Fonts are included via CSS, the way they are included cannot be changed.

My goal now is to prevent mobile devices from requesting these fonts to reduce bandwidth consumption.

Is there a CSS way, for example @media (min-width: 480px)

, to not load fonts in a responsive layout?

+3


source to share


3 answers


Most implementations load background image preloads that are referenced by CSS queries. (If you do any work using display:none;

, but it won't be supported in all browsers.)

The same goes for any fonts you have enabled via media queries, even if listed for a larger / different viewport. *

Why?

This allows for a smoother transition if the viewport is resized, for example. from portrait to landscape.

Decision

Given the limitations you mentioned, I don't see a clean way to do this with CSS alone. You can do something with JS (but make sure it degrades gracefully), or PHP .

But the simplest ways to reduce HTTP requests and how many visitors need to download involve doing one or all of the following:



  • Use less fonts or web safe fonts instead.
  • Using a CDN for fonts.
  • Including "minified" font files that contain only the characters you will use them for.

Let's open up Google Web Fonts for the last two.


If you expect or receive a lot of mobile traffic, which is important for the site, it is always worth rethinking the site design and layout from a mobile approach: what is needed and what is not. (This approach can often even help reduce the clutter on the desktop version of your site.)

* The fiddling approach can be useful for fonts as well, but you will have to check the browser yourself as it is not documented yet.

+1


source


You can create two different stylesheets, one for mobile and one for desktop, then use PHP browser detection or various other methods to find out if the user is on mobile or desktop and provide them with the appropriate stylesheet.



Take a look at the PHP function get_browser

: http://php.net/manual/en/function.get-browser.php

+1


source


All background images are optionally preloaded as long as they are specified in your media queries -

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

perhaps this method will work for fonts as well. If you are using something the JS needs (like typekit, google) your font will be requested due to JS anyways afaik.

+1


source






More articles:


All Articles