Use Custom Fonts in Ruby on Rails 3.1 with the asset pipeline

Just a quick post on something I just learned.  If you want to use a custom font in a ROR 3.1 project start with this post: http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/

Sidebar: FontSquirrel is awesome, the kit is really helpful. It’s another one of those really fantastic web projects that somebody put out there for free.

Anyway, after you get the font kit downloaded and have it unzipped into app/assets/fonts look in the stylesheet.css file in the kit.  There is some CSS that you can use to get started. Update the css to support the asset pipeline. You have to structure your URLs as follows:

@font-face {

font-family: ‘DroidSerifRegular’;
src: url(/assets/DroidSerif-Regular-webfont.eot);
src: url(/assets/DroidSerif-Regular-webfont.eot?#iefix) format(’embedded-opentype’),
url(/assets/DroidSerif-Regular-webfont.woff) format(‘woff’),
url(/assets/DroidSerif-Regular-webfont.ttf) format(‘truetype’),
url(/assets/DroidSerif-Regular-webfont.svg#DroidSerifRegular) format(‘svg’);
font-weight: normal;
font-style: normal;

}

Finally, if you are using Chrome for development it will throw an error like “Resource interpreted as Font but transferred with MIME type application/octet-stream”.  To fix this update config/initializers/mime_types with this line:

Mime::Type.register “font/opentype”, :font

That will fix the Chrome error.  Cheers and thanks to the Intertubes for the help:

http://spin.atomicobject.com/

http://www.fontsquirrel.com/

http://stackoverflow.com/questions/2871655/proper-mime-type-for-fonts

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s