Bourbon's @font-face mixin finds the font but wont display it

Question

I'm trying to get this font displayed on the header of my page using bourbon's font-face mixin.

My code is as follows:

@include font-face(3dumb, '3dumb/3Dumb-webfont', normal, $asset-pipeline: true)

.header {
        text-align: center;
        font-family: 3dumb;
};

This should set the font for my .header to 3dumb but it doesn't. the font is instead the default browser font.

My font is stored in assets/fonts/3dumb and I'm using rails 4.

Does anyone here know how to fix this?

Thanks in advance, Ben

Answer 1

You can show the font by default but not header, maybe you are missing the ' '

.header { font-family: '3dumb'; }

Answer 2

1. Make sure your font is in the folder app/assets/fonts. (no subfolder)

2. Check for any spelling / capitalization mistakes

If you want to use your font from vendor/assets/fonts then you can add the following to your application.rb:

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

Hope this helps.

UPDATE:

Try the following CSS instead:

@include font-face(3dumbregular, '3Dumb-webfont', normal, $asset-pipeline: true)

.header {
    font-family: '3dumbregular';
}