CODEWITHSUNDEEP
cssruby-on-railsruby-on-rails-3sass
Sasha
Sasha

Reputation: 6466

Custom font on Rails App not loading

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") %>');
  }
}

Upvotes: 0

Views: 1450

Answers (2)

Sasha
Sasha

Reputation: 6466

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"

Upvotes: 2

plucile
plucile

Reputation: 316

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

Upvotes: 1

Related Questions