Importing Third Party Fonts like Google Fonts – put them on top

We were using a theme for quite some time which uses Google fonts. There are no issues encountered until the number of CSS files increases too much that we need to consolidate them into 1 or 2 CSS files. This time, Google fonts stop working.

Update – specific to Google Fonts

Based on the comment given by @dennis, there is a better way to optimize Google Fonts. See bottom for details. Below is the original content.

The Problem

We used Assetic to manage the minification and consolidation of CSS and JS files. We managed to reduce files from 10+ CSS or JS into 2-4 files depending on the page. We simply list down the CSS/JS files into a config file in order they appear on the page/code using the previous implementation (eg: directly including a CSS/JS file). However, the first obvious discrepancy on the UI is that fonts doesn’t seem to match.

First, I though it was the font size or the font weight. After an hour or two, I realized it was the Google fonts not loaded.

The Fix?

I have read somewhere that font inclusion should be done on top of the CSS file. I reviewed the file containing the inclusion and it is indeed on top. However, I realized this is not the case when serving the consolidated version of the CSS where files are combined into a single file.

A simple trick to fix this is to create a CSS file which includes the Google fonts then put them on top of the list so that it gets loaded first.

See sample fonts.css

/* Make sure fonts are on first css to be included */
@import url("http://fonts.googleapis.com/css?family=Monda:400,700");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

Then the configuration for the CSS assets:

From:

<?php

// Sample config
$config['header_css'] => array(
    '/assets/css/bootstrap.css',
    '/assets/css/theme1.css',
    ...
);

To:

<?php

// Sample config
$config['header_css'] => array(
    '/assets/css/fonts.css',
    '/assets/css/bootstrap.css',
    '/assets/css/theme1.css',
    ...
);

That’s it!

Update re: Google Fonts

According to the comment below, Google Font API provides a way to combine fonts requests into a single request. This is posted on the Google Web Fonts Blog. Also, it is explained in that post that there are issues with @import in IE.

Therefore, I have to change our implementation from including the fonts.css at the top of the list, into moving it completely as a separate link tag. Then I have to remove the fonts.css inclusion from the config file for Assetic.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans|Open+Sans">

The link tag should be the top of all CSS inclusions and should appear before any script tags. Regardless, this is a third party content anyway, and we don’t save parallel downloads to our domains because this is coming from Google’s CDN.