css @font-face in bourbon

Question

I'm trying to add a custom font to a site, and I'm not sure where I'm going wrong.

In my SASS (bourbon) file, I have

@font-face {  
font-family: "officina";  
src: url("../fonts/officina/OfficinaSansStd-Book.otf") format("opentype");  
}

body {
   font-family: officina;
}

pretty basic. I have looked at the source for the page, and I don't see the officina font-file link anywhere. Should there be one? I'm concerned that the path may be the issue I'm having, but I'm not sure how to check this. I'm using rails, but I don't think I need to create a route to the font directly. I'm also using backbone, and I've placed the font in my assets directory, which is why it is one level up from my css.

I'm not really familiar with SASS, but does it generate a CSS file? If yes, what does it look like? The reference should be in there... — Pekka
@Pekka, yes, SASS creates a css file, and the css file contains the font-face as described above. — pedalpete
You are the path is 100% correct? Remember, paths inside the CSS file are relative to the CSS file, not the HTML file that includes it — Pekka
When you say you aren't seeing the link, does that mean your generated CSS file is not showing src line, or is it just giving you an error that it can not find the file? — Brian Hough
@BrianHough the CSS file itself is fine, I wasn't sure if I should see an entry in the html page to the font-file, but that was just my stupidity. I can't navigate to the font-file because of the rails routes. — pedalpete

pedalpete pedalpete · Accepted Answer · 2012-03-20T12:01:13

Ok, I got this resolved. The problem was that ruby wanted a route. Rather than keep the font in a separate font path, I put it in the media path which already existed, but using the stylesheets path itself in theory would have worked as well.

css @font-face in bourbon

1 Answers