Integrating @Font-Face Files into Rails Asset Pipeline

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.

How to setup assets pipeline in rails 5 to use a custom font?

I had generated the resources using scaffold. Adding desired font-family in app/assets/stylesheets/scaffold.scss fixed the problem. I have updated the github repo.

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/

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');
}

Fonts in rails 4.2.4

You can use custom fonts bellow way -

1. Create a folder name "fonts" inside the app/assets directory and place mostlymono.ttf fonts inside the fonts directory.

2. Now add this line to config/application.rb

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

3. Now you have to rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss and place to bellow code-

   @font-face {
    font-family: "MostlyMono";
    src: url(asset-path("mostlymono.ttf")) format("truetype");
    font-weight: normal;
    font-style: normal;
   }
   

4. Now add fonts to config/initializers/assets.rb for Precompile additional assets.

   Rails.application.config.assets.precompile += %w( mostlymono.ttf )
   

Grails Asset Pipeline @font-face src url

The issue for me was caused by a bug in the version of the Asset plugin that was bundled with Grails 2.4.2. This error will only show up for people using Windows PC's

Illegal character in path at index 0: \/../

Once I went from asset-pipeline:1.9.4 to asset-pipeline:1.9.6 the error went away

The error is discussed here:

Unable to add custom fonts to Rails application

write the @font-face as

@font-face {
 font-family: "Oswald";
 src: url(<%= asset_path 'fonts/Oswald-Regular.ttf' %>) format("truetype");
}

change the file name application.css to application.css.erb

---

Related Topics