CODEWITHSUNDEEP
ruby-on-rails-4sassasset-pipelinefont-face
kool-aid
kool-aid

Reputation: 31

Rails 4, @font-face, sass, assets?

I know that there are already questions regarding @font-face, sass and rails 4 but I want to see if anyone has been able to get this working.

My Sass File looks like this: 

@font-face{ font-family:"FrutigerNextW01-Regular";
src:    url(font-path("4cef6d85-d22a-4541-b469-da13751862aa.eot?#iefix"));
src:    url(font-path("4cef6d85-d22a-4541-b469-da13751862aa.eot?#iefix")) format("eot"),
        url(font-path("d74de079-587d-4049-9cca-50ba02a536f9.woff")) format("woff"),
        url(font-path("07749504-e72d-4fc9-a58d-5b853dd51fc7.ttf")) format("truetype"),
        url(font-path("8178e4eb-8ce0-4c15-a701-4a102b204c0e.svg#8178e4eb-8ce0-4c15-a701-4a102b204c0e")) format("svg");
}

I've tried using erb tags, asset-path and every other configuration I can find.

I've tried both of these lines in my application.rb file

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

and

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

Am I doing something wrong? I know that some have been able to get this configuration to work, but it's not working for me!

Upvotes: 3

Views: 603

Answers (1)

jlecour
jlecour

Reputation: 3035

I've got a Rails 3.2 app with web fonts that work correctly.

They are stored in app/assets/fonts and referenced from my ERB views with the asset_path() method (and not font_path()).

Here is the copy of my inline style tag :

<style type="text/css">
  @font-face {
    font-family: 'QuicksandBook';
    src: url('<%= asset_path('Quicksand_Book-webfont.eot') %>');
    src: local('☺'), url('<%= asset_path('Quicksand_Book-webfont.woff') %>') format('woff'), url('<%= asset_path('Quicksand_Book-webfont.ttf') %>') format('truetype'), url('<%= asset_path('Quicksand_Book-webfont.svg') %>') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'QuicksandBold';
    src: url('<%= asset_path('Quicksand_Bold-webfont.eot') %>');
    src: local('☺'), url('<%= asset_path('Quicksand_Bold-webfont.woff') %>') format('woff'), url('<%= asset_path('Quicksand_Bold-webfont.ttf') %>') format('truetype'), url('<%= asset_path('Quicksand_Bold-webfont.svg') %>') format('svg');
    font-weight: bold;
    font-style: normal;
  }
</style>

Upvotes: 3

Related Questions