CODEWITHSUNDEEP
ruby-on-railsfontsfont-face
Irwan
Irwan

Reputation: 583

Rails 4 - Custom Fonts

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

Upvotes: 3

Views: 2443

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

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

Upvotes: 2

posixpascal
posixpascal

Reputation: 3140

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.

Upvotes: 1

Related Questions