0

I'm using Rails 3.2.22 and have installed a new font using .woff and .woff2 files. But the font seems to fail to display locally only. The font shows up fine when I deploy to our staging environment after the assets have been precompiled and bundled up. I can also follow the url that my local compiled CSS is using to try and display the font, and that link downloads the correct files.

The font files are contained in the "app/assets/fonts" folder, I have this in my application.rb

config.assets.paths << Rails.root.join("app", "assets", "fonts")

and I am pulling the fonts into Sass like so:

// Custom Font Faces
@font-face {
  font-family: 'Museo Sans Rounded';
  src: font-url('MuseoSansRounded-500-webfont.woff2') format('woff2'),
       font-url('MuseoSansRounded-500-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  src: font-url('MuseoSansRounded-700-webfont.woff2') format('woff2'),
       font-url('MuseoSansRounded-700-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

Any clue why this doesn't display locally?

theleanmc
  • 33
  • 4
  • @font-face is tricky with Rails. This has worked in my experience: https://stackoverflow.com/questions/20926234/using-font-face-with-ruby-on-rails – brainbag Nov 17 '17 at 12:26

2 Answers2

0

Try to compile assets locally. Follow below steps:

config/environments/production.rb

config.assets.compile = true

then run command:

RAILS_ENV=production rake assets:precompile

and test it.

Community
  • 1
  • 1
puneet18
  • 4,341
  • 2
  • 21
  • 27
0

Try this way, this is a working example of 'Glyphicons Halflings'

@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff2') format('woff2'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')

}

vishnuprakash
  • 51
  • 4