11

For my newly started Rails 6 application I want to have a set of customs fonts. My setup looks like this:

# app/assets/stylesheets/my-font.sass

@font-face
  font-family: 'my-font'
  src: url('fonts/my-font.eot') format('embedded-opentype'), url('fonts/my-font.woff') format('woff'), url('fonts/my-font.ttf') format('truetype'), url('fonts/my-font.svg#my-font') format('svg')
  font-weight: 400
  font-style: normal

And then under app/assets/stylesheets/fonts I have all 4 files referenced in the sass file.

My application.sass has the following import: @import 'my-font'.

When I run rails assets:precompile it also puts all 4 files with suffixed version (e.g. my-font-7384658374658237465837246587263458.eot) in the public directory.

BUT, when I run the application the browser is looking for a file in the root directory called my-font.eot, which of course isn't there and 404s. This looks definitely like a configuration problem to me, but where I have no idea. Any help would be much appreciated.

arieljuod
  • 15,460
  • 2
  • 25
  • 36
Severin
  • 8,508
  • 14
  • 68
  • 117

2 Answers2

19

If you have the fonts inside /assets/ then use the asset-url helper.

src: asset-url('fonts/my-font.eot') format('embedded-opentype'),
     asset-url('fonts/my-font.woff') format('woff'),
     asset-url('fonts/my-font.ttf') format('truetype'),
     asset-url('fonts/my-font.svg#my-font') format('svg')

That way Sprockets will change "fonts/my-font.xxx" to the filename with the digest.

Personally I don't like to put fonts on the assets pipeline since they are probably not changing and only slows down your precompilation time, so I put them in public:

/public/fonts/my-font.eot
/public/fonts/my-font.woff
...ect...

And just use your original css code.

(This has nothing to do with webpack or webpacker)

arieljuod
  • 15,460
  • 2
  • 25
  • 36
  • Thank you so much. That fixed the problem! – Severin Aug 21 '19 at 13:53
  • 1
    It is true that precompiling font files that hardly ever change is probably over-engineering things, however Sprockets also creates gzipped versions of every asset, which allows serving compressed files if the browser supports it. You loose that speed boost by placing files in `public` instead of relying on assets precompilation. WOFF files are compressed by design, but TTF, OTF and EOT can be largish. – Goulven Feb 27 '21 at 08:28
  • What is the webpacker solution? – Luis Flores Jul 01 '21 at 01:20
  • hey @LuisFlores, I wrote an article about that last month, it includes the webpacker solution to use fonts https://www.ombulabs.com/blog/learning/webpacker/webpack-all-the-assets.html – arieljuod Sep 22 '21 at 02:05
17

  1. Add your fonts into app/assets/fonts folder.

  2. Now you need to tell Sprockets to load fonts in the first place. To do that, just add

    //= link_tree ../fonts to app/assets/config/manifest.js

Side note: you may come across advice to update initializers/assets.rb, but that is outdated, and Sprockets 4 wants you to add directive to load fonts to manifest.js.

  1. You need to define font-face for use in your application, and your intention was right, but you need to use font-url instead of url for it to work, so

src: font-url('my-font.eot') format('embedded-opentype') ...

And notice that you don't need to specify fonts directory, because font-url already implies it.

Bonus: you can use this sass mixin that simplifies specifying alternative formats for your fonts.

Community
  • 1
  • 1
Andrew Rozhenko
  • 416
  • 4
  • 10