CODEWITHSUNDEEP
cssruby-on-railsrubyfontsfont-face
user984621
user984621

Reputation: 48453

Rails - path to font does work on production, but doesn't on localhost

Here's the CSS block where I load CSS fonts:

@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot');
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
         url('../fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
         url('../fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The fonts are located in /app/assets/fonts directory.

On the localhost, when I load the page, the fonts are not loaded, but on Heroku are all fonts loaded correctly.

What is wrong?

Upvotes: 0

Views: 2314

Answers (3)

Granville Schmidt
Granville Schmidt

Reputation: 399

The reason you are seeing this, is that in a production environment all the assets are compiled and put into a single folder /assets/asset-name. With that said, both css and type faces are in the same folder, and can be accessed via the relative path. In a development environment, assets are not compiled and can be accessed at /assets/asset-type/asset-name, which means that the CSS and type faces won't be in the same folder.

To overcome this obstacle, Rails has an amazing helper called asset-url.

So for your example:

@font-face {
font-family: 'HelveticaNeueRegular';
src: asset-url('helveticaneue-roman.eot');
src: asset-url('helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
     asset-url('helveticaneue/helveticaneue-roman.woff') format('woff'),
     asset-url('helveticaneue/helveticaneue-roman.ttf') format('truetype'),
     asset-url('helveticaneue/helveticaneue-roman.svg#helvetica_neueregular')     format('svg');
font-weight: normal;
font-style: normal;
}

Plus, since you added a fonts folder under assets, you will need to add this to your asset path: config.assets.paths << "#{Rails.root}/app/assets/fonts" in the config/application.rb

Upvotes: 4

user984621
user984621

Reputation: 48453

I finally figured out this issue - into config/application.rb add following:

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

Upvotes: 0

DMKE
DMKE

Reputation: 4603

This has to do with the way the asset pipeline works:

  • In development environment, all assets are serverd dynamically from /app/assets/....
  • In production environment, assets are compiled and moved to /public/assets/ from where a web server can pickup the now static files.

I suspect the paths in your fonts.css (accidently?) point to the files in production environment.

To solve your situation, you basically have two options:

  1. move the font files into your /public directory (e.g. /public/fonts) and reference the files from there:

    @font-face {
  font-family: 'HelveticaNeueRegular';
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot');
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
       url('/fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
       url('/fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
       url('/fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  2. Use Rails' Asset helpers. A good introduction can be found here.

Upvotes: 0

Related Questions