Heroku and @Font-Face - Embedded Fonts Wont Display on Heroku

Heroku and @font-face - embedded fonts wont display on Heroku

So it turned out the root for resources was set to Public/Stylesheets so my path declaration in the font-face section was nonsensicalness. I took the easy out and moved the fonts under the stylesheets directory and everything works perfectly now!

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

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/

Custom font not working in heroku

This could be down to several issues; most notably, I would recommend you're not using dynamic asset paths:

---

Fingerprinting

Rails uses asset fingerprinting when you precompile assets

The reason for this is to allow each asset to be individually allocated to the system, thus providing a more robust structure (or something). Basically, it adds an MD5 hash to the end of your asset filenames:

global-908e25f4bf641868d8683022a5b62f54.css

---

Paths

Because dynamic fingerprinting makes all precompiled assets have different names, you need to use Rails' dynamic path helpers:

#app/assets/stylesheets/application.css.scss
@font-face {
    font-family: 'caviar_dreamsregular';
    src: asset-url('caviardreams-webfont.eot');
    src: asset-url('caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         asset-url('caviardreams-webfont.woff') format('woff'),
         asset-url('caviardreams-webfont.ttf') format('truetype'),
         asset-url('caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

You'll need to use a dynamic stylesheet engine such as SASS to handle the dynamic paths

Heroku not loading Google fonts

I had the same problem and found this answer:

https://stackoverflow.com/a/18216759

It appears that Heroku wants https. So throwing in https solved the problem for me.

---

Related Topics