Building an application on the new Rails 3.1 opens up a new way to serve up assets. The public folder is no longer the supported place for CSS, images and fonts, instead they live in the
vendor/assets/* folders. On my current project at AO we use custom fonts, initially hosted by Google, but we chose to serve them up locally in our app. This issue can be fixed in a few steps:
# Download the font files from Google – Since Google allows it.
# Convert the fonts for our server via Font Squirrel
# Update our CSS to use these fonts
h2. Google Fonts
Google Fonts is a great place to find all sorts of fonts for your web applications. There are a couple methods that you can include chosen fonts into your app. Normally, Google serves up the proper css and font file per browser and runs off of their CDN. Usually its just fine, but in our app we had issues with fonts not loading.
h2. Conversion of Fonts Via Font Squirrel
The next resource we used to get us closer to serving the fonts is Font Squirrel. Font Squirrel has free fonts,
@font-face kits and
@font-face kit generators. The
@font-face kits are what we want, offering the CSS and all of the conversions of the fonts for each browser. Google allows its fonts to be hosted and used in print, so they can be run through the
@font-face kit generator.
h2. Serve Up the Fonts
Once you upload and run the font through the converter, Font Squirrel gives you a zip of all the css and the converted files. Below is a sample of the CSS generated:
In order to serve the font files up, place the converted files from Font Squirrel into either the app/assets/fonts or vendor/assets/fonts (the latter being the proper place if these are not created or edited by you). There will be a large amount of files (5-10 per font). This is done to support various devices and browsers, based on their font file format.
Since we are on SCSS/Sass with Rails 3.1, all the
url(...)‘s need to be converted to
font-url(...). This is new with the Rails 3.1 asset pipeline, its essentially
asset_url(URL, 'font') – The new way to include assets. The syntax should be familiar if you have already worked with images. This needs to be put in your CSS files, generally at the top or included first in the asset pipeline load order. We are working in Sass, so here is the converted style:
And the converted CSS for those not using Sass or SCSS:
Once all the file and CSS are in place and properly referenced, fonts should be loading from your local server.