rails / sass-rails

Ruby on Rails stylesheet engine for Sass
MIT License
860 stars 333 forks source link

@font face does not seems to work #371

Closed softmonkeyjapan closed 8 years ago

softmonkeyjapan commented 8 years ago

I'm trying (again) to include some custom fonts within the assets pipeline and to tell you the truth this is always a nightmare.

Basically, I'm running a brand new Rails app (4.2.0) and I added my fonts at app/assets/fonts. I also register a new asset path within my initializers/assets.rb:

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

Then, as we can read everywhere, we need to use font-url (font-path) or asset-path, which I did :

@font-face {
    font-family: 'UXPin-icon-set';
    src: url(font-path('UXPin-icon-set.eot?kib1r2'));
    src: url(font-path('UXPin-icon-set.eot?#iefixkib1r2')) format('embedded-opentype'),
           url(font-path('UXPin-icon-set.woff?kib1r2')) format('woff'),
           url(font-path('UXPin-icon-set.ttf?kib1r2')) format('truetype'),
           url(font-path('UXPin-icon-set.svg?kib1r2#UXPin-icon-set')) format('svg');
    font-weight: normal;
    font-style: normal;
}

and of course this isn't working. I've try replacing font-url with asset-path and I even try everything describe here https://gist.github.com/anotheruiguy/7379570 but nothing works.

I'm pretty sure I'm doing something wrong somehow but honestly, the only thing in Rails that never works out of the box is this case, the fonts, or maybe there is somehow a lack in the documentation not explaining very well how to do it (searching on google will show thousand of cases like this one, so I'm not the only one, people are having trouble with this).

Sorry for the complaining, just wanted to pointed out this. Thanks for your great work and future answer.

rafaelfranca commented 8 years ago

Thank you for the report.

First, if you put fonts in app/assets/fonts you don't need to register anything. It is automatically in the assets path.

Second, have you restarted your application after you added the font to the folder?

rafaelfranca commented 8 years ago

Can you please provide a sample application that reproduces the error?

softmonkeyjapan commented 8 years ago

@rafaelfranca thanks for your answer. Yes, I did restart my application and it still does not work. I will give you an access to the related repo (by invitation) so you'll be able to check this out. Thanks

softmonkeyjapan commented 8 years ago

@rafaelfranca that's odd. I just tried to clone the app on my mac (first time) in order to reproduce the problem and it works. Out of the box, just using src: url('...') is working. In order to also use digest I've tried replacing url by font-url and it is also working (the compiled css display /assets/UXPin-icon-set-71fd99072fc...). I'm thinking some installation/version problem occurring on my Ubuntu install (office machine on which I have the issue). I'll try to reinstall the stack and see if it is fixed.

Anyway, thanks for your support and sorry for the trouble. I'm closing it.