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 app/assets/* and 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.
[…] just read this thread https://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn’t seem to work either […]
Jared, I stumbled across your post here thanks to SO and want to mention that your solution didn’t work for me but what did was simply leaving off the font asset path. I don’t know that the asset pipeline has changed much since the time you posted this but I’m using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation).
Here’s an example of my src attribute for EOT:
src: url(‘1617A5_4.eot’);
I’m a little bit confused by this but it seems like once assets are compiled the assets are all copied in to their parent folder (assets/store/) at which point the stylesheet can just pick them up.
Thanks for the feedback David. Are you using Sass or SCSS? You are saying that the font-url() is not working? We had recently updated from 3.1 to 3.1.3 on a project I am on and all seems to be working.
I would love to know where I could have been wrong, that way I can correct this issue and not lead others into another problem. Thanks!
Turns out I was mistaken, I left out one simple detail when trying your solution. My fonts sit under a subdirectory of assets and therefore simply needed store/ prefix for each path.
My solution must have worked because the stylesheet and fonts both end up getting compiled in to the same directory. Appreciate the post man!
No problem! Glad it helped solve an issue.
Hi Jared, I just upgrade a site over to Rails 3.1 for the first time. I’m trying to figure out this asset pipeline. I’m just using CSS for now – in your code you have /assets/fontname but you’re saying you have the fonts in an /assets/fonts/ directory? That’s how I have mine setup. After css/js are complied, are they still sitting in their respective folders? Could I do “../fonts/fontname” instead, or is that bad practice?
Also you’ve got a few local() calls in the CSS but just one in the Sass with different names vs. the original Font Squirrel code. How did you what you named this is correct, or does it matter? Thanks!!
Sometimes you just need to ask out loud and your brain decides to kick in.
So everything in the assets folder and subfolders are referenced by yoursite.com/assets/assetname.ext
So a “fonts” folder in the “assets” folder is flattened down to just the assets folder.
Local font is the name of the font that shows up on your computer. It checks to see if the visitor has the font installed locally before downloading. Get the name wrong, it will just download the font.
I’m still not getting my embedded fonts showing up on Heroku – even after a restart though.
Thanks dude. You make my understanding clear.
Sorry, I made a big mistake with the naming difference. I went back and tweaked the “converted” css and copied the wrong one from our stylesheets.
Now the next question is, are you overriding the font somewhere? In your net panel in chrome or firefox inspectors, do you see the font being requested? Are the requests failing? If you already have the font locally, remove the local call to force it to use the server version. Some fonts share a name or are recognized by your system and not displayed properly.
Also, another check is to make sure you are referencing the font properly on the tag you are trying to apply it to (my examply below:
h2 { font-family: ‘Font Name’, sans-serif; }
Make sure ‘Font Name’ is EXACTLY the same as the one you set up in your font-face declaration,
Your thought pattern is valid and the way things happen. I am not sure why the fonts don’t show up.
Thanks for the troubleshooting tips Jared. I’ve been meaning to get back to you about this weeks ago. I couldn’t get it loading using just CSS so I converted it to Sass. It was my first time using it and ended up being much easier than I expected.
I put the fonts in the app/assets/fonts folder and use font-url(“actual name of font file”) when declaring the font face. Works great!
Thanks again.
[…] Serving Fonts in Rails 3.1 | Atomic Spin […]