Custom font on Rails App not loading

Question

Super easy question, I expect. I'm trying to upload my custom font to the server, like so:

custom.css.scss

p, ol, li, a, td, ul, h1, h2, h3, h4, h5, h6, label {
  font-family: rockwell;
  src: url('/assets/Rockwell.TTF');
  text-align: left;
  em {
    font-family: rockwell;
    font-style: italic;
    src: url('/assets/RockwellItalic.TTF');
  }
  strong {
    font-family: rockwell;
    font-weight: bold;
    src: url('/assets/RockwellBold.TTF');
  }
}

I've tried putting those three TTF files both directly in app/assets (current attempt), and in app/assets/stylesheets. When I did the latter, I tried the src url as both /stylesheets/Rockwell.ttf and /app/assets/stylesheets/Rockwell.ttf.

None of these have actually worked. when my friend loads the site up in his browser, it's in another font. Any idea what I'm doing wrong? / How to fix it? If this is CSS3-only, how do I ensure I'm using CSS3?

EDIT -- I've been trying to figure out whether the app is having trouble finding the font file, so I've checked the network/fonts tab of inspect element. Whether or not I provide a real path (I've tried /stylesheetsRockwell.ttf by mistake), nothing shows up there at all.

EDIT -- possible way to wrap in bold and italic?

@font-face {
  font-family: 'Rockwell';
  src: url('<%= asset_path("Rockwell.ttf") %>');
  font-weight: normal;
  font-style: normal;
  strong {
    src: url('<%= asset_path("RockwellBold.ttf") %>');
  }
  em {
    src: url('<%= asset_path("RockwellItalic.ttf") %>');
  }
}

possible duplicate of [Using @font-face with Rails 3.1 app?](http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app) — Sully, Feb 21 '13 at 16:31
Bingo! One question, though. How do I use @font-face to load up the Italics and Bold versions of the font? It's now not processing strong and em tags. Should I try the edit above? — Sasha, Feb 21 '13 at 17:15

score 2 · Accepted Answer · answered Feb 23 '13 at 21:44

What worked for me:

I added the fonts to a new assets/fonts/ directory, then added that to the assets path

config/application.rb

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

Then I declared a bunch of font-faces, which I individually assigned to items I wanted normal, bold, and italic:

typography.css.erb.scss

/* font families */

@font-face {
  font-family: 'Rockwell';
  src: url('<%= asset_path("Rockwell.ttf") %>');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Rockwell Italic';
  src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
@font-face {
  font-family: 'Rockwell Bold';
  src: url('<%= asset_path("RockwellBold.ttf") %>');
}

p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label {
  font-family: Rockwell; # The elements I wanted defaulted to normal
}

h1, h2, a, strong {
  font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold
}

li {
  small {
    font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold
  }
}

em {
  font-family: 'Rockwell Italic'; # Manual italic
}

# Whenever I wanted italic or bold, I did it through font-family for consistency.

This meant turning all css files into css.erb.scss files, so they understand "<%= asset_path"

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

In a Rails project, I strucutre the fonts as i do with stylesheets or images :

style/stylesheet/myStyle.css

style/images/myImage.jpg

style/fonts/myFont.ttf

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 21 '13 at 16:59

plucile

306
3
4

Thanks. Just did that, per the linked-to duplicate question above. Left trying to figure out how to wrap in bold/italic, though. Is what I'm trying above going to work? (I'm asking rather/in addition to testing this out, cause testing involves pushing the site and getting a friend to look at it on their browser and report back.) – Sasha Feb 21 '13 at 17:19

Custom font on Rails App not loading

2 Answers2