Rails 3.2.x - cannot set up font-face on localhost

Question

Whole day I am trying to set up to work @font-face on localhost. Here's my setup:

application.rb and development.rb:

config.assets.paths << "#{Rails.root}/app/assets/fonts"

In CSS:

@font-face {
  font-family: 'my_font';
  src: asset-url('font_name.eot', font);
  src: asset-url('font_name.eot?#iefix', font) format('embedded-opentype'),
       asset-url('font_name.woff', font) format('woff'),
       asset-url('font_name.ttf', font)  format('truetype'),
       asset-url('font_name.svg#AndrogyneMedium', font) format('svg');    
}

I've tried also to precompile assets:

bundle exec rake assets:precompile

I've tried also couple times to restart app, but nothing didn't help me.

Could anyone give me any advice, how to fix it? Thank you in advance.

EDIT: Ok guys, I'll give you zillion dollars who help me to solve it :) I've tried probably everything...

This sounds stupid, but have you checked to see if the font urls are resolving? — Christopher Marshall
– Christopher Marshall, Commented Dec 25, 2012 at 22:22

Femaref · Accepted Answer · 2012-12-25 20:30:07Z

1

You need to add the files to the precompile config as well:

config.assets.precompile += %w(*.svg *.eot *.ttf *.woff)

answered Dec 25, 2012 at 20:30

Femaref

61.5k8 gold badges145 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

coletrain · Accepted Answer · 2012-12-25 22:24:16Z

1

I struggled on this issue to so my solution was to see if typekit had the font that I was looking for in which they did and I kept it moving. You should not spend hours worrying about fonts but rather the code so check it out because it will save you the time and headache.

answered Dec 25, 2012 at 22:24

coletrain

2,8371 gold badge38 silver badges44 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:48:53Z

0

If you organize your fonts in assets/fonts you can use the following setup.

# config/application.rb
# Serve fonts via Asset Pipeline
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )

I'm using the font-awesome icon font, so in the font-awesome.sass I use a font-url helper (that differs from your asset-url).

# vendor/stylesheets/font-awesome.sass
@import compass/css3/font-face

@font-face
  font-family: 'FontAwesome'
  src: font-url("fonts/fontawesome-webfont.eot")
  src: font-url("fonts/fontawesome-webfont.eot?#iefix") format("eot"), font-url("fonts/fontawesome-webfont.woff") format("woff"), font-url("fonts/fontawesome-webfont.ttf") format("truetype"), font-url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg")

Source: related stackoverflow question

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Dec 25, 2012 at 22:06

Thomas Klemm

10.9k1 gold badge53 silver badges54 bronze badges

2 Comments

user984621 Over a year ago

I don't know what am I doing wrong, but I have exactly this setup and it still doesn't work... still those new fonts don't work.

user984621 Over a year ago

Hi Thomas... trying & trying, but unfortunately, the same... the fonts are not loaded.

Collectives™ on Stack Overflow

Rails 3.2.x - cannot set up font-face on localhost

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related