Using @font-face with Rails 3.1 app?

Question

I'm having trouble using the following @font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts

Here is the declaration I used (generated by Font Squirrel.)

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('Chunkfive-webfont.eot');
  src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('Chunkfive-webfont.woff') format('woff'),
     url('Chunkfive-webfont.ttf') format('truetype'),
     url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Anyone successfully utilize @font-face on their Rails 3.1 app?

Update

I just read this thread http://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 unfortunately.

Hengjie · Accepted Answer · 2013-02-24 13:51:08Z

44

You have to add the folder to the assets path (to file config/application.rb), see Rails Guides

config.assets.paths << "#{Rails.root}/app/assets/fonts"

And you should use the asset_path helper:

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

edited Feb 24, 2013 at 13:51

Hengjie

4,6682 gold badges33 silver badges35 bronze badges

answered Nov 1, 2011 at 21:43

topek

19k3 gold badges38 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

pruett Over a year ago

thanks for the documentation. still doesn't work however :( I wonder if there is something else that im missing

topek Over a year ago

I just saw a upper/lower case issue, you spelled Fonts and I fonts. And you should use asset_path in your stylesheet, updated my post

topek Over a year ago

what does the part of generated stylesheet look like now?

pruett Over a year ago

Invalid CSS after "...unkfive-webfont": expected ")", was ".eot') %>');"

topek Over a year ago

are you using the erb extension? style.scss.erb

|

Greg Stewart · Accepted Answer · 2012-04-12 22:12:49Z

40

I know this is an old question, but I just stumbled across this issue with rails 3.2, and after reading the link to the documentation posted previously, there was no need to edit the application.rb. All I needed to do was do the following in my stylesheet (using sass)

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

So instead of using url, I used the generic asset-url, which takes 2 arguments, the file and the asset class, in this case 'font'.

answered Apr 12, 2012 at 22:12

Greg Stewart

6868 silver badges9 bronze badges

4 Comments

botbot Over a year ago

where did you place your fonts though?

Elle Mundy Over a year ago

Font assets go in app/assets/fonts/. Then add this to the Application class in your config/application.rb: config.assets.paths << "#{Rails.root}/app/assets/fonts". Then this answer works beautifully, even in Rails 3.2

Dom Over a year ago

Thanks @DanMundy. config.asset.paths + asset-url combined are working in Rails v3.2.10.

Elle Mundy Over a year ago

Upgrade to 3.2.11! There's a pretty big security hole in 3.2.10.

Alvaro Lourenço · Accepted Answer · 2012-12-03 16:18:27Z

14

From Rails 3.1 and above you can call font-url directly. Like this:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: font-url('Chunkfive-webfont.eot');
  src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     font-url('Chunkfive-webfont.woff') format('woff'),
     font-url('Chunkfive-webfont.ttf') format('truetype'),
     font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Expect your final css to look like that:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(/assets/Chunkfive-webfont.eot);
  src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
     url(/assets/Chunkfive-webfont.woff) format('woff'),
     url(/assets/Chunkfive-webfont.ttf) format('truetype'),
     url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

Usually works :)

answered Dec 3, 2012 at 16:18

Alvaro Lourenço

1,3411 gold badge10 silver badges22 bronze badges

3 Comments

scarver2 Over a year ago

This is the correct answer for Rail's asset pipeline. Make sure your CSS file is named .css.scss so that the font-url helper will function correctly.

Yarin Over a year ago

This is the answer. Like @scarver2 said, font-url will only work with SASS or LESS files. See stackoverflow.com/a/10907276/165673 for more.

robertwbradford Over a year ago

Also make sure the scaffold.css.scss isn't overriding things with its font declarations.

rachel · Accepted Answer · 2013-07-04 13:45:41Z

6

Using Rails 4.0 (don't know if this is specific to 4, but anyway), I was only able to make it work with url(font_path('font-name.ttf')). Adding the fonts path to the assets path was not necessary either (~~config.assets.paths << "#{Rails.root}/app/assets/fonts"~~).

So, to me this is what worked:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(font_path('Chunkfive-webfont.eot'));
  src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
     url(font_path('Chunkfive-webfont.woff')) format('woff'),
     url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
     url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
  font-weight: normal;
  font-style: normal;
}

answered Jul 4, 2013 at 13:45

rachel

3874 silver badges10 bronze badges

1 Comment

Loed Over a year ago

In my experience with Rails 4 you could simply use font-url for 'url', but make sure the extension of the file is: .css.scss, otherwise parsing font-url won't work. EDIT: See post below, already explained it.

Jared · Accepted Answer · 2011-11-02 02:09:50Z

1

I just updated that article on Atomic Object's Spin blog. Here is the CSS converted (You were looking at the Sass syntax)

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

answered Nov 2, 2011 at 2:09

Jared

9647 silver badges16 bronze badges

2 Comments

pruett Over a year ago

i'm using .scss tho. hmm...strange

Jared Over a year ago

Local is to check if they have the font on their machine.

David · Accepted Answer · 2011-12-05 20:48:53Z

0

I'm using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation). The solutions given here did not work for me and I eventually just tried what ended up being my solution - there was no need for

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.

answered Dec 5, 2011 at 20:48

David

1672 silver badges10 bronze badges

1 Comment

David Over a year ago

Use Jared's solution, which also worked for me. I simply forgot the store/ prefix for each font files URL. And use the font-url helper, not fonts-url.

Kevin_L22 · Accepted Answer · 2013-10-13 22:56:42Z

0

While this is late, you could use Compass's +font-face mix-in to avoid all this trouble. The mixin helps your life easier by

Not remember the awful caveats of the traditional font-face decleration
It internally handles url_helper and format declarations for you
It's far easier to remember

It is declared the following way madams and gentlemen:

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);

edited Oct 13, 2013 at 22:56

answered Oct 13, 2013 at 22:15

Kevin_L22

1137 bronze badges

Collectives™ on Stack Overflow

Using @font-face with Rails 3.1 app?

7 Answers 7

6 Comments

4 Comments

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

4 Comments

3 Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related