Custom Font not working in Rails Asset Pipeline

Question

I have this file structure in my Rails app:

\APP
+---assets
|   +---fonts
|   |       icons.eot
|   |       icons.svg
|   |       icons.ttf
|   |       icons.woff
|   +---icons
|   +---images
|   +---javascripts
|   +---stylesheets
+---controllers
|
... etc ...

The custom font I have (icons) works in development, but not in production (or staging). I know it has something to do with the asset pipeline (404 errors). How do I get my icons / font to show up?

My _icons.scss file (included in application.css.scss):

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "icons";
    src: font-url("icons.svg#icons") format("svg");
  }
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.icon-ico-addcart:before,
.icon-ico-addcart-hover:before,
.icon-ico-allparsers-menu:before,
.icon-ico-blog-menu:before,
.icon-ico-cart:before,
...

The errors I get:

GET http://127.0.0.1:8888/assets/icons.woff 
GET http://127.0.0.1:8888/assets/icons.ttf 404 (Not Found)      application-e60c1d16b23dd8ae118e0bb3a1d3311c.js:6129

I am precompiling before. My production environment is my own server. The font was generated using fontcustom with svgs. I used this article to do so.

The font is being precompiled... If I edit the application.css file on the page, changing

url('/assets/icons.woff')

to

url('/assets/icons-8695a8c5b193c6423e0b3b7a9c71b808.woff')

my images appear. This means that my assets are precompiling, but I'm not able to reference them correctly in my scss file.

I wrote a generic way to diagnose and solve this problem at stackoverflow.com/a/40898227/1197775. — sites
– sites, Commented Nov 30, 2016 at 21:10

builder-7000 · Accepted Answer · 2020-09-01 19:25:35Z

1

What are you using for production? Heroku?

Try precompiling those types of files:

 # In config/initializers/assets.rb
 Rails.application.config.assets.precompile += %w( .ttf )

Include all the font endings. You could also try including the font by CDN instead.

If that doesn't work, maybe check out this answer: Rails 4: Why are fonts not loading in production?

edited Sep 1, 2020 at 19:25

builder-7000

7,7183 gold badges26 silver badges45 bronze badges

answered Sep 1, 2015 at 14:30

toddmetheny

4,4721 gold badge25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

I am using my own server for prod. Also, the font is one that I compiled myself using fontcustom. There is no CDN. It does work in Dev though.

Andrew · Accepted Answer · 2015-09-01 14:27:37Z

0

It could be that the content type (application/x-font-woff) isn't served along with the asset, I'd start there.

answered Sep 1, 2015 at 14:27

Andrew

585 bronze badges

Collectives™ on Stack Overflow

Custom Font not working in Rails Asset Pipeline

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related