@font-family CSS specification in rails, Not displaying the proper font

Question

What I have at the moment is a fonts folder in the following path: app/assets/fonts.

Storing the various @font-face, 'font-format-files' (eot, woff, ttf). In addition, I have a mystyle.scss.erb file with the following code:

    @font-face {
  font-family: 'ProximaNovaRegular';
  src: font-url("<%= font_path('proximanova-regular-webfont.eot') %>");
  src: font-url("<%= font_path('proximanova-regular-webfont.eot') %>") format('embedded-opentype'),
  font-url("<%= font_path('proximanova-regular-webfont.woff') %>") format('woff'),
  font-url("<%= font_path('proximanova-regular-webfont.ttf') %>") format('truetype'),
  font-url("<%= font_path('proximanova-regular-webfont.svg#ProximaNovaRegular') %>") format('svg');
}

@font-face {
  font-family: 'ProximaNovaBold';
  src: url("<%= font_path('proximanova-bold-webfont.eot') %>");
  src: url('<%= font_path('proximanova-bold-webfont.eot') %>") format('embedded-opentype'),
  url("<%= font_path('proximanova-bold-webfont.woff') %>") format('woff'),
  url("<%= font_path('proximanova-bold-webfont.ttf') %>") format('truetype'),
  url("<%= font_path('proximanova-bold-webfont.svg#ProximaNovaBold') %>") format('svg');
}

@font-face {
  font-family: 'boxyfont';
  src: url("<%= font_path('04b_19__-webfont.eot') %>");
  src: url("<%= font_path('04b_19__-webfont.eot?#iefix') %>") format('embedded-opentype'),
    url("<%= font_path('04b_19__-webfont.svg#04B_19__') %>") format('svg'),
    url("<%= font_path('04b_19__-webfont.woff') %>") format('woff'),
    url("<%= font_path('04b_19__-webfont.ttf') %>') format('truetype");
}

I am trying to use the 'boxy-font' on a class (.mid) housing an h2 - see the code for it:

.mid {
  padding-bottom: 50px;
  font-family: 'boxyfont';
}

This is not working though, it's only showing a standard default font. What am I doing wrong?

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

Perhaps it is because the url portion of the font declaration is not the same as the named font.

See this answer to a similar question. https://stackoverflow.com/a/10907276/3261328

edited May 23 '17 at 12:10

Community

1
1

answered Feb 28 '14 at 15:22

chrisfin

21
7

Thanks @chrisfin, unfortunately still no luck. I've updated the original with the updated code. – Sonny Black Feb 28 '14 at 16:14

score 0 · Answer 2 · answered Feb 28 '14 at 15:37

In an assumption that you should have stored these fonts under '/app/assets/fonts/' (Rails >= 3.1 uses assets to store all kinds of static files), I would suggest that you should replace:

font_path with asset_path

i.e.,

@font-face {
  font-family: 'ProximaNovaRegular';
  src: url("<%= asset_path('proximanova-regular-webfont.eot') %>");
  src: url("<%= asset_path('proximanova-regular-webfont.eot') %>") format('embedded-opentype'),
  url("<%= asset_path('proximanova-regular-webfont.woff') %>") format('woff'),
  url("<%= asset_path('proximanova-regular-webfont.ttf') %>") format('truetype'),
  url("<%= asset_path('proximanova-regular-webfont.svg#ProximaNovaRegular') %>") format('svg');
}

@font-face {
  font-family: 'ProximaNovaBold';
  src: url('<%= asset_path('proximanova-bold-webfont.eot') %>');
  src: url('<%= asset_path('proximanova-bold-webfont.eot') %>t') format('embedded-opentype'),
  url('<%= asset_path('proximanova-bold-webfont.woff') %>') format('woff'),
  url('<%= asset_path('proximanova-bold-webfont.ttf') %>') format('truetype'),
  url('<%= asset_path('proximanova-bold-webfont.svg#ProximaNovaBold') %>') format('svg');
}

@font-face {
  font-family: 'boxy-font';
  src: url('<%= asset_path('04b_19__-webfont.eot') %>');
  src: url('<%= asset_path('04b_19__-webfont.eot') %>t') format('embedded-opentype'),
  url('<%= asset_path('04b_19__-webfont.woff') %>') format('woff'),
  url('<%= asset_path('04b_19__-webfont.ttf') %>') format('truetype'),
  url('<%= asset_path('04b_19__-webfont.svg#04B_19__') %>') format('svg');
}

Hope that would go fine..

Oops!! sorry, I was wrong. You can use font-path for Rails >=3.2.1. — Rajesh Omanakuttan, Feb 28 '14 at 15:58
Yup, tried both but unfortunately the font still isn't showing up. — Sonny Black, Feb 28 '14 at 16:34
did you try changing the .erb extension for mystyle.scss.erb file and use .css instead and then call the font in a format like url('/assets/proximanova-regular-webfont.eot'). Just try. I'm not sure about it... — Rajesh Omanakuttan, Feb 28 '14 at 16:39

@font-family CSS specification in rails, Not displaying the proper font

2 Answers2