3

Currently I trying to add custom fonts into my Rails 4 application.

  1. I added all of my fonts into assets/fonts
  2. I added config.assets.paths << Rails.root.join("app", "assets", "fonts") into config/application.rb
  3. I added script into my style.css
  @font-face {
      font-family: 'oxygenregular';
      src: url(font-path('oxygen-regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
           url(font-path('oxygen-regular-webfont.woff')) format('woff'), 
           url(font-path('oxygen-regular-webfont.ttf'))  format('truetype'),
           url(font-path('oxygen-regular-webfont.svg') + "#MyFont") format('svg');
  }

  body {
    font-family: 'oxygenregular', arial;
    background: #f4f5f9;
    background-image: url(../images/bg-pattern.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
  }

I don't get any error like 404 (Not Found), since I got the error before modified config/application.rb

But the application doesn't load the font that I already put. I tried on native HTML and the fonts are working well, but when I trying to put them into Rails application, it doesn't load.a

Benjamin Cheah
  • 1,401
  • 17
  • 23
Irwan
  • 543
  • 1
  • 5
  • 18
  • Sub-question: Is doing `Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/` enough, or do you also need to add paths? – ahnbizcad Feb 08 '15 at 10:04

2 Answers2

2

Fonts

The problem you have is you're calling the font files without referencing their paths correctly.

The issue here is the same as when you reference images or other files from the asset pipeline - if you use a file path which doesn't exist, it's just not going to load (because of the asset fingerprinting):

Fingerprinting is a technique that makes the name of a file dependent on the contents of the file. When the file contents change, the filename is also changed. For content that is static or infrequently changed, this provides an easy way to tell whether two versions of a file are identical, even across different servers or deployment dates.

What you get with many Rails assets is an inability to reference the correct file, as the filepath has had its name changed when you precompiled them, preventing them from loading in most cases.

Paths

To add to @praszyk's answer is that you'll need to use one of the asset_paths to pull the correct font path, which can be done using one of the CSS preprocessors that come with Rails (typically SCSS or SASS)

The problem you have is using .css is not going to do this - you have to use either .scss or .sass:

#app/assets/stylesheets/style.css.scss
@font-face { font-family: 'oxygenregular'; 
             src: asset_url('/fonts/oxygen-regular-webfont.eot' + "?#iefix") 
             format('embedded-opentype'), 
               asset_url('/fonts/oxygen-regular-webfont.woff') format('woff'),
               asset_url('/fonts/oxygen-regular-webfont.ttf') format('truetype'), 
               asset_url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }

Using asset_url with scss will automatically call the correct version of the file - fingerprinted or not.

If you use this with @praszyk's answer, it should hopefully work

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • I tried with ```@praszyk``` and your ways, but it still doesn't work. I changed ```style.css``` into ```style.css.scss``` and change the code like yours. – Irwan Jul 14 '14 at 10:07
  • If you are using sass, `asset-url` with a hyphen rather than `asset_url` with an underscore is preferable. The former is sass, while the latter is rails (correct me if I'm wrong on this). Additionally, instead of `asset-url` there is a helper method `font-url` which is a bit more semantic. When using font-url, it will search in the /assets/fonts/ folder, just like how `image-url` searches the /assets/images/ folder. Also see this http://stackoverflow.com/a/10907276/2951835 – ahnbizcad Feb 08 '15 at 11:18
1

Change:

@font-face { font-family: 'oxygenregular'; 
             src: url(font-path('/fonts/oxygen-regular-webfont.eot') + "?#iefix") 
             format('embedded-opentype'), 
             url(font-path('/fonts/oxygen-regular-webfont.woff')) format('woff'),
             url(font-path('/fonts/oxygen-regular-webfont.ttf')) format('truetype'), 
             url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }

body { font-family: 'oxygenregular', ...}

Since you're loading the fonts in "style.css" which resides in /assets/stylesheets (and /stylesheets/ in the browser) the script tries to load /stylesheets/oxygen-regular-webfont.eot.

Appending "/fonts/" to your paths should work as expected. Also check the developer console of your browser if you're still having errors.

posixpascal
  • 3,031
  • 3
  • 25
  • 44
  • ```@praszyk``` I tried to change the code like yours, but it still doesn't work. Is it better if I put the code on ```assets/stylesheet/application.css``` ? – Irwan Jul 14 '14 at 10:12
  • Did you add /fonts/ to your asset pipeline? – posixpascal Jul 14 '14 at 12:49
  • Can you make any folder under assets, and then a magic method "foldername-path" will appear? Is that how "font-path" can be called, even if it's not in the documentation? – ahnbizcad Feb 08 '15 at 10:03