adding fonts to precompile

Question

How do I add a assets/fonts folder to precompile?

I currently have the following:

  config.assets.precompile += %w( saas_admin.css saas_admin.js stripe_form.js fonts)

which isn't working, am I supposed to put assets/fonts instead?

mystyle.css.erb

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('SourceSansPro-Regular.eot?') format('eot'),
         url('SourceSansPro-Regular.otf')  format('opentype'),
         url('SourceSansPro-Regular.woff') format('woff'),
         url('SourceSansPro-Regular.ttf')  format('truetype'),
         url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
         font-weight: normal;
         font-style: normal;
}
@font-face{
    font-family: 'MyriadProRegular';
    src: url('myriadpro-regular-webfont.eot');
    src: local('?'), url('myriadpro-regular-webfont.woff') format('woff'),
    url('myriadpro-regular-webfont.ttf') format('truetype'),
    url('myriadpro-regular-webfont.svg#webfont8y9VojoZ') format('svg');
    font-weight: normal;
    font-style: normal;
}

Please help!

try this `config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/` — rails_id, May 20 '14 at 19:07
Thanks! Tried that along with: config.assets.paths << Rails.root.join('app', 'assets', 'fonts') and it still isn't precompiling :( — user3399101, May 20 '14 at 19:10
change capital letters to lowercase, `SourceSansPro-Regular` change to `sourcesanspro-regular` http://stackoverflow.com/a/10907276/1297435 — rails_id, May 20 '14 at 19:13

score 1 · Answer 1 · answered May 20 '14 at 22:25

In your config/environments/production.rb file, add the following line:

config.assets.precompile += %w( *.eot *.woff *.ttf *.otf *.svg )

This will include all of your font files in the precompile process.

Then in your Sass file, use the font-url helper so that the fonts works correctly with the asset pipeline. This will look inside of of vendor/assets/fonts or app/assets/fonts for your font files.

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: font-url('SourceSansPro-Regular.eot?') format('eot'),
         font-url('SourceSansPro-Regular.otf')  format('opentype'),
         font-url('SourceSansPro-Regular.woff') format('woff'),
         font-url('SourceSansPro-Regular.ttf')  format('truetype'),
         font-url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
         font-weight: normal;
         font-style: normal;
}

score 0 · Answer 2 · answered May 21 '14 at 09:23

We use this on Heroku & it works - slightly different to @jcypret's answer, but hopefully it will help:

#config/environments/production.rb
config.assets.precompile += ["layout/fonts/fonts.css"] #-> you won't need this
config.assets.precompile += %w( .svg .eot .woff .ttf )

#app/assets/stylesheets/layout/fonts/fonts.css.sass (this is where we store our file...)
@font-face
    font:
        family: 'Ionicons'
        weight: normal
        style: normal
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1')
    src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1#iefix') format('embedded-opentype'), asset_url('layout/fonts/IonIcons/ionicons.ttf?v=1.4.1') format('truetype'), asset_url('layout/fonts/IonIcons/ionicons.woff?v=1.4.1') format('woff'), asset_url('layout/fonts/IonIcons/ionicons.svg?v=1.4.1#Ionicons') format('svg')

asset_url

Notice how we used the asset_url path?

I know one of the answers recommended the use of fonts-url, but we prefer to use asset_url (more reliable).

The main problem you'll generally have with fonts, esp on Heroku, is the asset fingerprinting (referencing url: file will only keep the static file). You need to be able to reference the dynamically generated file, which is where asset_url comes in

If you try this, it should work

adding fonts to precompile

2 Answers2