Solving the Problem of @font-face Inside Media Queries

Keeping page weight down is important, especially on mobile networks where page load is often a bigger factor. This technique allows you to reduce the load by ommiting @font-face fonts loading in certain media queries, while still keeping all browsers reasonably happy.

Mobile data connections frequently aren’t as good as desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach to solving this is to use the @font-face rule only for a certain range of media and screens using media queries.

An excerpt from Solving the Problem of @font-face Inside Media Queries

View original article