How to use fonts in Rails 4

Question

I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it's just not working for my application.

I am using application.css.less and have the following declaration:

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

Note: I have tried using url() instead of font-url() also. The former generates 404 errors on the console, where the latter just doesn't seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the assets folder, or anywhere

in my config/application.rb I have:

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

And in both my config/environments/development.rb and config/environments/production.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

My font files are located at app/assets/fonts and are not contained in a folder below that...

What am I missing?

UPDATE:

folder structure

app
└── assets
    └── fonts
        ├── HDV_Peace.eot
        ├── HDV_Peace.svg
        ├── HDV_Peace.ttf
        └── HDV_Peace.woff

Just wanted to note that you cannot use the "font" property for this to work. You must specify: font-family: 'HDVPeace'; in your application.css.less file. Wasted a good 20 minutes trying to figure out what was wrong so hopefully this will save someone time and effort :) — TwoByteHero
– TwoByteHero, Commented Aug 11, 2014 at 23:28
Here is an excellent How-To for setting up the asset path for fonts using Rails 4 and Bourbon: github.com/thoughtbot/bourbon/issues/239#issuecomment-26167073 (no need to edit anything in application.rb, production.rb or staging.rb.) — gl03
– gl03, Commented Aug 27, 2014 at 12:28
If you want to manually deal with fonts, here is a solution I built for my Rails application: stackoverflow.com/a/37650261/3802981 — Châu Hồng Lĩnh
– Châu Hồng Lĩnh, Commented Jun 6, 2016 at 7:41
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:12

Dave Powers · Accepted Answer · 2019-06-05 21:52:19Z

60

Your @font-face declaration is very close, you are just missing the /assets prefix within the url declaration.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

Anything that has been added to assets.paths is available directly under the /assets path in both development and production. You only need the asset path modification line within application.rb, doing it again in development.rb and production.rb is just redundant.

Additionally, all of the font formats are essentially binary. There is no need to pre-compile them, so you can safely remove the assets.precompile addition.

edited Jun 5, 2019 at 21:52

Dave Powers

2,4332 gold badges38 silver badges39 bronze badges

answered Aug 18, 2013 at 14:06

Parker Selbert

1,54613 silver badges13 bronze badges

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

16 Comments

Parker Selbert Over a year ago

I just reviewed one of the applications I have setup with custom fonts on Rails 4. It looks like adding fonts to paths isn't even necessary. Remove the paths addition, restart, and it should work fine.

SnareChops Over a year ago

Tried and restarted server. No change. In the Dev Tools in Chrome under Sources (where it shows all of the assets that the server pushed down to the client) I don't see the font files, or the fonts folder. Also the console is still returning with 404 resource not found errors... Somehow the asset pipeline isn't picking up the files...

Matijs van Zuijlen Over a year ago

font-url is supposed to add the /assets prefix by itself, so there should be no need to specify it.

Eric Caron Over a year ago

I think the problems are that Rails4 no longer puts a version of the fonts - without a digest - in the asset pipeline. Because of that, you can't trust /assets/HDV_Peace.eot to exist (it was there in Rails3, now only /assets/HDV_Peace-yourdigesthere.eot will exist.) See stackoverflow.com/questions/17536023/… for more details

Space Over a year ago

I found that a new Rails 4 app just needed: font-url('fontfile.eot?'); in the scss file. Needed to restart server for it to work after creating the fonts direction under app/assets though.

|

Nalin · Accepted Answer · 2014-09-10 09:07:11Z

52

In Rails 4, there is a helper to set the path for the fonts.

If you have the font in /assets/fonts or vendor/assets/fonts, Rails 4 will find them! To take advantage of this, in the Bootstrap CSS file change the @font_face call to

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Note that there is no folder specification in front the font files. This is completed by the rails helper.

answered Sep 10, 2014 at 9:07

Nalin

5214 silver badges3 bronze badges

1 Comment

TJ Biddle Over a year ago

Note! For the past, do not include assets/fonts/; assume that's the root! So if you have something in assets/fonts/roboto/robot.eot then it would be font-url('roboto/roboto.eot')

rebagliatte · Accepted Answer · 2015-03-25 19:48:14Z

11

This worked for me on a Rails 4.1 app.

Add the fonts under `app/assets/fonts`
Call them from a `.css.scss` file as follows:

@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

answered Mar 25, 2015 at 19:48

rebagliatte

2,1461 gold badge20 silver badges25 bronze badges

1 Comment

dimitarvp Over a year ago

This helped me, thank you. The crucial part was to use both url and font-path one after the other as you did: url(font-path('font-asset-path'))

user377277 · Accepted Answer · 2014-09-10 14:26:10Z

9

Restart 'rails server' after creating the app/assets/fonts directory

answered Sep 10, 2014 at 14:26

user377277

Comments

zwippie · Accepted Answer · 2014-02-04 08:53:18Z

5

I found this article to solve all of my problems.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

edited Feb 4, 2014 at 8:53

zwippie

15.6k3 gold badges44 silver badges58 bronze badges

answered Feb 4, 2014 at 1:54

Ricky

7731 gold badge6 silver badges8 bronze badges

Comments

david.juntak · Accepted Answer · 2016-08-31 16:46:49Z

3

In case if you guys have problem using fonts in Rails 5 you just need to edit app/assets/config/manifest.js

And then insert this //= link_tree ../fonts

How to use:

@font-face { font-family: 'FontAwesome'; src: url('fontawesome-webfont.eot?v=4.6.3'); src: url('fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

And also dont forget to restart your server.

answered Aug 31, 2016 at 16:46

david.juntak

615 bronze badges

Comments

Phix · Accepted Answer · 2014-12-18 10:27:23Z

2

Sometimes fonts are not detected from the assets/fonts directory.

If security is not an issue, we can put the fonts directory into the public folder. They will then be available at a public/ level.

edited Dec 18, 2014 at 10:27

Phix

10.1k4 gold badges39 silver badges65 bronze badges

answered Dec 18, 2014 at 9:53

tjs7706

854 bronze badges

Comments

luigi7up · Accepted Answer · 2014-02-26 18:34:31Z

1

Forget about changing anything in Rails 4 in your application.rb. Just add /assets/ prefix like @Parker Selbert said and the following will work:

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

answered Feb 26, 2014 at 18:34

luigi7up

5,9823 gold badges53 silver badges60 bronze badges

1 Comment

aenw Over a year ago

Any directory under /assets will be searched with the font-url helper method (and any helper method), so putting '/assets/_folder_' is not needed. The Rails Guide says this: " 2.2.1 Search Paths When a file is referenced from a manifest or a helper, Sprockets searches the three default asset locations for it. The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special - any path under assets/* will be searched" guides.rubyonrails.org/asset_pipeline.html#asset-organization

Collectives™ on Stack Overflow

How to use fonts in Rails 4

8 Answers 8

16 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

16 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related