Google fonts not loading in Heroku: how to solve it

There are 3 ways of loading the google fonts, as per Google Fonts tutorial:

  • Standard – This is a standard stylesheet link that you’ll place in the head portion of your HTML file. This saves you the step of adding the @import rule to your CSS file because you’re essentially adding in a stylesheet that already has it thrown in.
  • CSS – If you don’t want to link to the auto-generated stylesheet in your header, then use the CSS @import rule shown in the second tab.
  • JavaScript – The code in here is part of the WebFont Loader, which is a JavaScript library that was actually developed by both Google and Typekit that will give you more control over font loading. You can read more about it here.
  • Source: http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/. https://developers.google.com/fonts/docs/getting_started

    Out of the three, only the first (Standard) and the third (Javascript) worked for me. I was using the second (@import in css file) and it did not work. Maybe because I am compiling and compressing the assets with yui-compressor. Not sure about that, because I have not tested without the compressor. The reality is that it was working fine locally and it did not work at all when uploaded.

    So, now I am using the standard link method and it works beautifully.

    I have seen that some people reported that their problem was solved by using https instead of plain http, as shown here: http://stackoverflow.com/questions/17682045/heroku-not-loading-google-fonts It was not the solution for me.

    Advertisements

One thought on “Google fonts not loading in Heroku: how to solve it

  1. Hi,
    The second method stop working for me when I was including more than one stylesheet, and the error I found was that @import had to be the first statement, which led me to believe that other stylesheets were included before the one including the fonts.
    I changed to the first method and fonts are now working, albeit, still in development.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s