Import Multiple Google Web-fonts in a Single Request

Many designers are now widely using web fonts to decorate their pages and quite a few of them use Google Web Fonts specifically. But embedding too many web fonts in a page increase number of request for each of them. This can increase page load time. So, what should be the solution?

Multiple Import in One Request

Tu reduce number of request to Google font API, we can combine all of them in a single tag. Consider this example. Suppose we have to import two fonts, ‘Brawler’ and ‘Righteous’. Normally users put two different tags for each one, like:

<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Brawler'>

<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Righteous'>

This code can be optimized and can be written as:

<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Brawler|Righteous'>

Here we are combining multiple requests into a single tag, just separating the fonts with a pipe “|” character. This trick seems very simple but improve your page loading, specially for old browsers which only have 2 connections open per domain at a time.

The JavaScript Version

If you are using JavaScript for applying Web fonts to your pages, you may use this code for multiple font request:

<script type="text/javascript">
WebFontConfig = {google: { families: [ 'Brawler::latin','Righteous' ] }};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

What to Avoid

Using @import directives in CSS for embedding web-fonts may seems flexible and comfortable for you. But, it is strictly advised not to use @import in CSS to import any font.

@import url(http://fonts.googleapis.com/css?family=Brawler|Righteous);

This directive is not well processed by older versions of Internet Explorer and may raise some performance issue.