1

I'm having trouble including fonts for my rails app. I tried following the advice from this post: Using fonts with Rails asset pipeline, but I'm still confused.

I'm trying to add this font. I made an app/assets/fonts folder and added the fonts to it. I changed production.rb accordingly.

I'm confused about declaring my fonts like so: 

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

These are my 4 RobotoSlab fonts:

  • RobotoSlab-Bold.ttf
  • RobotoSlab-Light.ttf
  • RobotoSlab-Regular.ttf
  • RobotoSlab-Thin.ttf

They all have dashes in the names. So what do I write instead of iconmoon.eot? RobotoSlab-Regular.ttf or RobotoSlab.ttf?

Also, I'm confused about where I should address the .eot part, and where I should address the .ttf part. In the example above, the .eot part was addressed first, and then the .ttf part was addressed along with all the other formats. But the default extension for my font is .ttf, so does that change things?

Also, I'm confused about which font files I'm supposed to include. Most fonts on http://www.fontsquirrel.com/ have multiple font files to download (in order to address variations of bold and italics). Are you supposed to link to all of them in @font-face?

Thanks for the help.

Community
  • 1
  • 1
Adam Zerner
  • 17,797
  • 15
  • 90
  • 156

1 Answers1

0

There are a number of things which could be a problem:

Where are your font files actually stored?

If they are in /assets/fonts, you need to reference that path directly:

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

Did you use stylesheet.css from Font-Squirrel?

Stylesheet.css has all the code for the different fonts you've just turned into @font-face elements. You mentioned you have several fonts which are not included in your css file -- the rendered fonts from front-squirrel will have the relevant code contained in the stylesheet.css which comes with them

You just need to change the references in the stylesheet to your own app, and include the code in a .css file of your own

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • The font files are in `app/assets/fonts`. That still doesn't answer my questions of 1) Do I include a dash, 2) Where do I use `.eot` vs. `.ttf`, and 3) Which font files should I include. – Adam Zerner Nov 04 '13 at 19:24
  • I didn't use `stylesheet.css` from Font Squirrel. I didn't see anything about that. Even if I used it, I'm not sure how to implement it with Rails, because my css files are all `.css.scss`. – Adam Zerner Nov 04 '13 at 19:25