Using @Font-Face with Ruby on Rails

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 to use fonts in Rails 4

Your @font-face declaration is very close, you are just missing the /assets prefix within the url declaration.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

Anything that has been added to assets.paths is available directly under the /assets path in both development and production. You only need the asset path modification line within application.rb, doing it again in development.rb and production.rb is just redundant.

Additionally, all of the font formats are essentially binary. There is no need to pre-compile them, so you can safely remove the assets.precompile addition.

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 @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 fonts with Rails asset pipeline

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

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.

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.
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';
```

Official way of adding custom fonts to Rails 4?

Yes the link given will explain it well, however if u need another detailed explanation then here it is

Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts
Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
You can move the downloaded fonts to your app folder under app/assets/fonts/

After downloading the file you need to "declare" the fonts you will be using in your css like this

@font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

Finally you can use the font-family that you just declared wherever you want like this
```
#e-registration {
  font-family: "Kaushan Script Regular";
}
```

Hope this helps.

In rails 5 @font-face custom css is not working after I put fonts in assets's font folder?

Try this

font-family: '/assets/ProximaNovaA-Light';
src: url('/assets/ProximaNovaA-Light.otf') format('opentype')

How to use custom fonts in Rails 6 with Webpack

If you have the fonts inside /assets/ then use the asset-url helper.

src: asset-url('fonts/my-font.eot') format('embedded-opentype'),
     asset-url('fonts/my-font.woff') format('woff'),
     asset-url('fonts/my-font.ttf') format('truetype'),
     asset-url('fonts/my-font.svg#my-font') format('svg')

That way Sprockets will change "fonts/my-font.xxx" to the filename with the digest.

Personally I don't like to put fonts on the assets pipeline since they are probably not changing and only slows down your precompilation time, so I put them in public:

/public/fonts/my-font.eot
/public/fonts/my-font.woff
...ect...

And just use your original css code.

(This has nothing to do with webpack or webpacker)

Using @Font-Face with Ruby on Rails