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.
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.