Official way of adding custom fonts to Rails 4?

Question

I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.

Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?

Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?

there is no mention of fonts in the official doc for asset pipeline - http://guides.rubyonrails.org/asset_pipeline.html — Raj, Jan 21 '14 at 06:23
complete reference - http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline — Raj, Jan 21 '14 at 06:24

score 67 · Accepted Answer · edited Jun 05 '19 at 20:11

67

Yes the link given will explain it well, however if u need another detailed explanation then here it is

Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts

Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
You can move the downloaded fonts to your app folder under app/assets/fonts/

After downloading the file you need to "declare" the fonts you will be using in your css like this

@font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

Finally you can use the font-family that you just declared wherever you want like this
```
#e-registration {
  font-family: "Kaushan Script Regular";
}
```

Hope this helps.

edited Jun 05 '19 at 20:11

Dave Powers

2,051
2
30
34

answered Jan 21 '14 at 08:03

Nikhil Nanjappa

6,454
3
28
44

2

Outstanding explanation. In case anyone has any trouble with the specifics. Under my app, the css `src` line needed to be changed to `src: url(KaushanScript-Regular.otf) format("truetype");` – neanderslob Nov 14 '14 at 08:44
Is this all that's necessary? What about adding config paths and making sure it works on production? – ahnbizcad Feb 08 '15 at 09:56
You specify the font format. But when you include multiple types, do you declare multiple lines to fall back on? How do you do that, just declare multiple lines? – ahnbizcad Feb 08 '15 at 09:58
4

Don't you need to use `asset-url()` so that it works on production when it gets precompiled and a hash digest gets appended to the file name? – ahnbizcad Feb 08 '15 at 09:59
What is the truetype for? – Jwan622 Oct 14 '18 at 18:55
1

@Jwan622 - The `format()` is to provide the browser with a hint as to what format a font resource is, so it can select a suitable one. The available types are: `woff`, `woff2`, `truetype`, `opentype`, `embedded-opentype`, and `svg`. – Nikhil Nanjappa Oct 16 '18 at 15:41
Add this line to config/application.rb config.assets.paths << "#{Rails.root}/app/assets/fonts" – nourza Jul 25 '20 at 18:39

score 20 · Answer 2 · edited Oct 14 '18 at 18:56

Just did it...

Download and save the font files (eot, woff, woff2...) in your assets/fonts/ directory
1. In your config/application.rb add this line config.assets.paths << Rails.root.join("app", "assets", "fonts")

What this does is it precompiles your fonts folder just as it does by default with your images, stylesheets etc.

and make sure this line is set to true config.assets.enabled = true

In your sass/scss or even inline with <script> tag

@font-face {   font-family: 'Bariol Regular';   src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg');   font-weight: normal;   font-style: normal; }

Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets

Finally, set the font-family in your CSS files

body {
   font-family: 'Bariol Regular', serif;
}

FREE TIP: This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader

With Rails 5, I was able to add my fonts to /app/assets/fonts and use the font-url() method when specifying the font src. This was enough to work, I did not need to change any other configurations (didn't do step 2 or 3 above) — Ryan, Nov 04 '16 at 01:58
For me I added this config.assets.paths << "#{Rails.root}/app/assets/fonts" — nourza, Jul 25 '20 at 18:39

Julie · Answer 3 · 2017-07-25T15:41:01.260

I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:

Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.

I defined in a .scss file that we use:

@font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I leveraged the custom font in other .scss files:

.digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}

This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.

If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

In your html, inside the <head> tag, add:

score 1 · Answer 4 · edited Jun 05 '19 at 17:10

1

The only way that worked for me was this:

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}

edited Jun 05 '19 at 17:10

Dave Powers

2,051
2
30
34

answered Mar 29 '19 at 16:42

rld

2,603
2
25
39

score 0 · Answer 5 · answered Oct 19 '20 at 04:48

Just put fonts under app/assets/fonts, and modify url('Your Font Path') to font-url('Your Font Path') in your scss. Aslo Asset Pipeline will auto precompile fonts into public/assests folder.

check here for more detail: https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

Official way of adding custom fonts to Rails 4?

5 Answers5

Linked