Search code examples
htmlcssexpressherokugoogle-font-api

Why google fonts won't work in Heroku but work locally?

I'm using express + heroku to host a landing page prototype.

When running the webpage locally all fonts load correctly.

When loading the page on heroku, the fonts won't work most of the time...

My css files are under /public/css/style.css

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Helvetica");

The error I get on console is:

GET https://fonts.googleapis.com/css2?family=Playfair+Display&family=Helvetica net::ERR_ABORTED 403

I have tried to change the way I download the fonts with the link tag:

<link href="https://fonts.googleapis.com/css?family=Playfair+Display&family=Helvetica" rel="stylesheet">

Same issue...

Any ideas ?

Thanks!

Solution

  • I used to have the same issue but deleting the assets folder located in the public folder solved the problem for me. This will let Heroku precompile the css files for you and not use the files generate by running rake assets:precompile locally.

    This fellow seemed to have a similar problem to yourself:

    http://robert-reiz.com/2012/11/16/google-fonts-on-heroku/