Third Party Font Integration Ruby on Rails Not Working Path Ok, Naming Good, Compiled No Errors in console or server

Question

Updated

Now this is what my application.scss looks like now

@font-face {
  font-family: 'DidotLTStd-Roman';
  src: font-url('2C0947_0_0.eot') format("embedded-opentype");
  src: font-url('2C0947_0_0.woff') format('woff');
  src: font-url('2C0947_0_0.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DidotLTStd-Italic';
  src: font-url('2C0947_1_0.eot') format("embedded-opentype");
  src: font-url('2C0947_1_0.woff') format('woff');
  src: font-url('2C0947_1_0.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvantGardeGothicITCW02XLt';
  src: font-url('2C0947_2_0.eot') format("embedded-opentype");
  src: font-url('2C0947_2_0.woff') format('woff');
  src: font-url('2C0947_2_0.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}


.about {
    font-family: 'AvantGardeGothicITCW02XLt';
}

including this line in application.rb

config.assets.precompile += %w( .svg .eot .woff .ttf )

but still not working. No problems in chrome console and I doublechecked the file names.

ActionController::RoutingError (No route matches [GET] "/assets/webfonts/2C0947_1_0.ttf"):

Its my first time integration third party fonts in the ruby on rails application. I am going the directions here in the corrected answer

Using fonts with Rails asset pipeline

Its a rails 4.0.2 app. I dropped all of my eot, ttf, woff fonts into the app/assets/fonts folder

by default since this is a 4.0.2 app it should look at this fonts folder

I am using scss.

I added the following to my application.scss file

@font-face {
  font-family: 'DidotLTStd-Roman';
  src:url('2C0947_0_0.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DidotLTStd-Italic';
  src:url('2C09047_1_0.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvantGardeGothicITCW02XLt';
  src:url('2C09047_2_0.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.about {
    font-family: 'DidotLTStd-Italic';
}

I have alternate the src:font-url to src:url I have tried adding this to application.rb

config.assets.paths << Rails.root.join("app", "assets", "fonts")

I have restarted the server. This is what I see when I check in the console log

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/2C09047_1_0.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/webfonts/2C0947_1_0.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/webfonts/2C0947_1_0.ttf

its looking for the webfonts folder and I even changed the name of the fonts folder to webfonts but it still couldn't find it.

So the zip folder that I bought also contain a layout.css and a mywebfontkit.css which I drop into the stylesheets folder inside assets. I also dropped the highlight.js into the js assets folder as well.

score 0 · Answer 1 · answered Sep 18 '14 at 23:15

Try adding this to your application.rb

# Precompile additional assets - from http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline
config.assets.precompile += %w( .svg .eot .woff .ttf )

Also, FYI, it was the font-url version that worked for me - like this:

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

(And don't forget to restart the server again afterwards!)

I definitely see improvements. But now I am getting `GET http://localhost:3000/fonts/2C09047_1_0.woff ` problem in chrome console. I switched to `font-url` as well. It improved because its now looking at the right place but it can't find it even though the woff file is there. Also the search to `/assets/webfonts` did not go away. I tried this version as well `config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/` — Jngai1297, Sep 19 '14 at 01:43

Third Party Font Integration Ruby on Rails Not Working Path Ok, Naming Good, Compiled No Errors in console or server

1 Answers1