Using @Font-Face with Rails 3.1 App

Using @font-face with Rails 3.1 app?

You have to add the folder to the assets path (to file config/application.rb), see Rails Guides

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

And you should use the asset_path helper:

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

Using @font-face with Ruby on Rails?

You need to use asset_path for use an asset in a css file ( add erb extension to your application.css file then asset_path are available in your CSS rules)

@font-face {
  font-family: 'fontello';
  src: url('<%= asset_path("fontello.eot") %>');
  src: url('<%= asset_path("fontello.eot#iefix") %>') format('embedded-opentype'),
       url('<%= asset_path("fontello.woff") %>') format('woff'),
       url('<%= asset_path("fontello.ttf") %>') format('truetype');
}

How can I embed fonts with @font-face in Rails 4?

It turns out that the asset pipeline that @JimLim mentioned works a bit differently in Rails 4. Full docs here, but here's the relevant excerpt:

2 How to Use the Asset Pipeline

In previous versions of Rails, all
assets were located in subdirectories of public such as images,
javascripts and stylesheets. With the asset pipeline, the preferred
location for these assets is now the app/assets directory. Files in
this directory are served by the Sprockets middleware.

Assets can still be placed in the public hierarchy. Any assets under
public will be served as static files by the application or web
server. You should use app/assets for files that must undergo some
pre-processing before they are served.

In production, Rails precompiles these files to public/assets by
default. The precompiled copies are then served as static assets by
the web server. The files in app/assets are never served directly in
production.

So I ended up moving my /fonts directory into /public adjusting my paths in the @font-face declaration accordingly and everything works fine.

Using fonts with Rails asset pipeline

1. If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders:

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   
   

   For Rails versions > 4, you must place your fonts in the app/assets/fonts folder.

   Note: To place fonts outside of these designated folders, use the following configuration:

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   For Rails versions > 4.2, it is recommended to add this configuration to config/initializers/assets.rb.

   However, you can also add it to either config/application.rb , or to config/production.rb

2. Declare your font in your CSS file:

   @font-face {
     font-family: 'Icomoon';
     src:url('icomoon.eot');
     src:url('icomoon.eot?#iefix') format('embedded-opentype'),
       url('icomoon.svg#icomoon') format('svg'),
       url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }
   

   Make sure your font is named exactly the same as in the URL portion of the declaration. Capital letters and punctuation marks matter. In this case, the font should have the name icomoon.

3. If you are using Sass or Less with Rails > 3.1.0 (your CSS file has .scss or .less extension), then change the url(...) in the font declaration to font-url(...).

   Otherwise, your CSS file should have the extension .css.erb, and the font declaration should be url('<%= asset_path(...) %>').

   If you are using Rails > 3.2.1, you can use font_path(...) instead of asset_path(...). This helper does exactly the same thing but it's more clear.

4. Finally, use your font in your CSS like you declared it in the font-family part. If it was declared capitalized, you can use it like this:

   font-family: 'Icomoon';
   

Custom font on Rails App not loading

What worked for me:

I added the fonts to a new assets/fonts/ directory, then added that to the assets path

config/application.rb

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

Then I declared a bunch of font-faces, which I individually assigned to items I wanted normal, bold, and italic:

typography.css.erb.scss

/* font families */

@font-face {
  font-family: 'Rockwell';
  src: url('<%= asset_path("Rockwell.ttf") %>');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Rockwell Italic';
  src: url('<%= asset_path("RockwellItalic.ttf") %>');
}
@font-face {
  font-family: 'Rockwell Bold';
  src: url('<%= asset_path("RockwellBold.ttf") %>');
}

p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label {
  font-family: Rockwell; # The elements I wanted defaulted to normal
}

h1, h2, a, strong {
  font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold
}

li {
  small {
    font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold
  }
}

em {
  font-family: 'Rockwell Italic'; # Manual italic
}

# Whenever I wanted italic or bold, I did it through font-family for consistency.

This meant turning all css files into css.erb.scss files, so they understand "<%= asset_path"

Integrating @font-face files into rails asset pipeline

Start by putting your fonts into app/assets/fonts. After that, you can include your fonts in a sass / scss file via the font_url('font.eot') helper.

Otherwise, asset_path should still find the fonts there if you're determined to use it.

Using fonts with Rails 4.2.4

Don't change the assets path

If you put your resources into app/assets, you're all set, as mentioned here.

The default locations are: the images, javascripts and stylesheets directories under the app/assets folder, but these subdirectories are not special - any path under assets/* will be searched.

Use asset-url or font-url

If you refer to The Asset Pipeline page on Ruby on Rails guides, you'll see the adequate method here is to use asset-url (or font-url) as in:

@font-face {
    font-family: 'comic_andy';
    src: asset-url('comic_andy.ttf') format('truetype');
}

On your development environment, it should compile as:

@font-face {
    font-family: 'comic_andy';
    src: url(/assets/comic_andy.ttf) format("truetype");
}

NB: the proper format for .ttf files is format("truetype").

Make sure your font format is supported

If things still don't work, maybe there's a problem with your ttf file (my project is using the woff format) and you should maybe use a service such as Font Squirrel Webfont generator to fix it.

@font-face rails 3.2

OK so thought I would give the answer so it may help other people out in my situation. I just googled it and put all the pieces together, I was being lazy/afraid of the unknown on this one so apologies for that.Just trying it really helps understanding

Anyway

1) Create a folder called fonts in app/assets

2)Put all svg .eot .woff .ttf within this folder

3)In config/application.rb put the following

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

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf ) 

4)In your application stylesheets you place your @font-face styles, for example

  @font-face {
font-family: 'DearestRegular';
src: url('Dearest-webfont.eot');
src: url('Dearest-webfont.eot?#iefix') format('embedded-opentype'),
     url('Dearest-webfont.woff') format('woff'),
     url('Dearest-webfont.ttf') format('truetype'),
     url('Dearest-webfont.svg#DearestRegular') format('svg');
font-weight: normal;
font-style: normal;

}

5) Then wherever you want to use the font just use font-family as normal
6) Oh and restart the server to bring it all together :)

asset_path - fonts not applied

As I have read from Rails 3.1:

The public folder is no longer the supported place for CSS, images and
fonts, instead they live in the app/assets/* and vendor/assets/*
folders.

So, to set up new fonts, I have followed the steps below:

1. download the desire font from http://www.google.com/fonts
2. convert each file -
   http://www.fontsquirrel.com/tools/webfont-generator
3. copy all *.eot, *.svg, *.ttf, *.woff files in /vendor/assets/fonts
   folder
4. create fonts.css.scss file in the /assets/stylesheets/custom/ folder
   as follows:

@font-face {

font-family: 'RobotoCondensed';
src: asset-url('robotocondensed-regular-webfont.eot', 'font');
src: asset-url('robotocondensed-regular-webfont.eot?#iefix', 'font') format('embedded-opentype'),
asset-url('robotocondensed-regular-webfont.woff', 'font') format('woff'),
asset-url('robotocondensed-regular-webfont.ttf', 'font') format('truetype'),
asset-url('robotocondensed-regular-webfont.svg#roboto_condensedbold','font') format('svg');
font-weight: normal;
font-style: normal;
}

Source: http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/

---

Related Topics