Search code examples
ruby-on-railssassfont-facebourbon

Bourbon's @font-face mixin

I'm new to Bourbon & SASS and trying to use the @font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app.

Bourbon provides the following examples:

@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);

// Rails asset-pipeline - place fonts in app/assets/fonts/
@include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);

What I did:

// application.css.scss
@import "bourbon";
@import "fonts";

// fonts.css.scss
@include font-face(MuseoSans, '/fonts/MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);

* { 
  font-family: MuseoSans;
}

The fonts are in assets/fonts/MuseoSans/ with filenames like MuseoSans_500-webfont.eot, .ttf, etc. I get the impression you can leave off the extension and Bourbon is supposed to pick up all the files.

I've tried a lot of different variants of the above to no avail. I know that Bourbon and the files are working because when I set the font-family to $helvetica I see a change on the page.

If anyone can provide the proper code, or a GitHub project that I could look at, I'd be much obliged.

Solution

  • Try removing the leading "/fonts" in your in your path like:

    @include font-face(MuseoSans, 'MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);