Troubleshooting the Dilemma Associated With @Font-face Inside Media Query

Font Faces Css2

With more and more users getting inclined towards using mobile devices for accessing the web, it makes sense for business entities to pay more focus on building mobile optimized website. Despite of growing mobile device usage, it has been observed that mobile data connections are seemingly weaker to deliver than desktop ones. This is why while downloading custom fonts for your mobile devices you may have experienced that the download time usually take up several seconds.

A viable solution to increase the download speed of custom fonts for your device screens is to use the @font-face rule. However, make sure to apply the rule to only a certain range of device screens using media queries. But sadly, this approach don’t work for browsers such as Firefox 10, IE and lower versions. This post will discuss about the solution to this problem.

Detailed View on the Problem

Since increasing number of consumers prefer mobile device over desktop to access websites, it is becoming essential for web designers to build mobile optimized design. But they also need to focus on balancing the performance while facilitating users with optimal web experience via their mobile devices. Once the website is complete and is accessed via a Smartphone, we often stumble across a white block – that is supposed to have some content. This problem occurs when the custom font applied to the text of the web design doesn’t get loaded properly.

The Solution to @font-face Inside Media Query Problem

Well, as discussed above, a good solution is to use the @font-face rule for applying custom font to only a certain screens using media queries. Let us discuss how to apply the @font-face rule inside a @media query

For this purpose, we’ll have to create two files named as “index.html” and “style.css”. The first file will contain the text with the custom font applied, and the second one will contain the style of the page.

Let’s create an index.html page with the following code:

This is a very basic example with just one paragraph and a link to the stylesheet. Let us now create style.css file with mobile first approach:

As you can see in the code above, the paragraphs in the stylesheet are set to an Arial font, with various fallbacks. What’s more? A font stack is used including some of the most commonly used fonts that are used in the major operating systems. On the basis of CSSFontStack, Arial font is found 99.84% on Windows and 98.74% on Mac. And if the selected fonts are not available, then by default generic sans-serif font is used.

Media query is defined in the second part of style.css. This will help us target the devices screen having at least 980px width. Furthermore, in second part of style.css we have setup the @font-face rule for downloading the custom font, which makes use of Fontspring Bulletproof @Font-Face Syntax. And then, the new font is getting applied to all the paragraphs, which overrides the previously set style.

The discussed solution will seem an appropriate choice to most of you, as it will help apply a custom font only for device screens having a big screen and, are less likely, to have any issue because of a little bandwidth overhead. But, unfortunately the solution is not supported by IE version 10, Firefox 10 and their lower versions. This is because according to CSS2.1 specifications, you cannot use at-rules inside @media. While the last updated version of Internet Explorer does not support this feature, other browsers such as Firefox and Mozilla versions higher than 10th version supports the at-rules feature inside @media. Moreover, as IE version 8 and lower doesn’t understand the media queries concept, so even if Internet Explorer new versions are updated, the problem will still persists for the older versions.

Solving @font-face Inside Media Query Problem in Internet Explorer
There is a solution to applying @font-face rule inside a media query in IE as well, but partially.
Lot of people are not aware of Internet Explorer compatibility problem, and chances are that whenever you come across such problem you’ll try to understand about the problem by using Google as your search engine. Here is an overview of how you can solve the compatibility problem for Internet Explorer 9 and lower versions.

For this first we’ll need to create a separate CSS file, let’s say, fonts.css that contains all the @font-face rules, not inside a media query but rather using a conditional comment. Let us now check the source code of our fonts.css as follows:

Using the above solution the page weight will remain the same like before, for the conditional comment part as well as some major browsers but not Internet Explorer. For Internet Explorer we’ll add some overhead, as we’ll need to download an additional stylesheet. The stylesheet will contain some specific to @font-face rules, and hence, after minimizing the stylesheet, any average file wouldn’t cause the weight to increase over 1-2kb. Now this is acceptable in most of the cases. Below is the code that will help you use the approach using the minified version of the stylesheet:

Although, this is a smart solution but it is incomplete. That’s because, IE10 no longer support conditional comments. And thus, the 10th version of Internet Explorer will ignore the above written code snippet. And so, we still haven’t been able to solve the problem.

Solving the Problem for Internet Explorer 10

Now, for solving the problem of applying @font-face rule inside @media in IE10 let’s use a less-clean approach, as we require a hack. For this let us write a code snippet that will detect IE10, and then test whether the width of the window is greater than or equal to 980px. In case the conditions returns as “true”, fonts.min.css stylesheet will be added to theelement of the page.

Note: Since, the hack is based on JavaScript, make sure that your JS is enabled or else the hack won’t work.

Conclusion

Adding custom fonts help in making your website design look appealing to the visitors’ eyes. And many developers as well as designers are using them. But since, adding custom fonts can bring in huge traffic, it is very important to optimize them for mobile devices. Reading this post, you will come to know about using a mobile first approach for the fonts you’re using in your site having @font-face inside media queries. Also, you will learn about some useful tricks to apply the @font-face rule inside media query in Internet Explorer.