How to Add a Custom Font to Rails App

How to add a custom font to Rails app?

Checkout http://www.css3.info/preview/web-fonts-with-font-face/

Larger example, assuming they're resolved directly under the assets dir

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/nokiapureheadlinerg-webfont.eot');
  src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
  url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
  url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
  url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

Im sorry I dont know LESS

Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')

how to add a custom font to rails app

@font-face is a CSS feature, and has no deal with Rails. It will loads the font the same way as loads image with url(path/to/image.jpg).

font-family inside @font-face defines the name you will use to set the font. Exactly the same as you set Arial or Verdana. Actually this line in @font-face and in your selector will be the same (e.g. a { font-family: 'Nokia Pure Headline'; }). And this is the thing which connects files with font name.

You can define many @font-face with the same font name but different font files, font-weight, font-style, etc. This way you will connect the font file with the set of font properties. So a style with font-family: 'Nokia Pure Headline'; font-style: bold; will use the file from the @font-face where you have defined font-family as 'Nokia Pure Headline' and font-style as bold;

How to install custom fonts in Rails 6 and Webpacker (and bootstrap and SASS/SCSS)

I am a recent user of Webpack and not a good JS coder yet I managed to get my fonts compiled by Webpack.

Actually in your CSS when you point to your font in "media" folder you are refering to the compiled asset in "public/packs/media" folder.

Though what you want is not to use the data in the public folder, you really want to compile that font so it eventually ends up in this folder.

Then instead of pointing to "/media/fonts/source-sans-pro/SourceSansPro-Regular.otf" you want instead to refer to your font in the javascript folder : "../fonts/source-sans-pro/SourceSansPro-Regular.otf" then you will see the font compiled properly and appear in "public/packs/media" folder.

NB: OTF is not the best compiled font format ( https://creativemarket.com/blog/the-missing-guide-to-font-formats ). You better version your font into WOFF and WOFF2 through this website : https://transfonter.org/

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.

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

How to add a custom font to Rails app?

Checkout http://www.css3.info/preview/web-fonts-with-font-face/

Larger example, assuming they're resolved directly under the assets dir

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/nokiapureheadlinerg-webfont.eot');
  src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
  url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
  url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
  url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

Im sorry I dont know LESS

Also for the config of the assets pipeline to have the contents of assets/fonts available under we use:

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')

How to install local fonts for rails 5.2

I think you may have to modify the base.scss file

@font-face {
  font-family: "Open-Sans";
  src: url(asset-path('Open-Sans.ttf')) format("truetype");
}

body {
  font-family: "Open-Sans", Helvetica, Arial, sans-serif;
  // font-family: $body-font-family;
  // background-color: #2f4050;
  background-color: #222;
  font-size: 15px;
  color: $text-color;
  overflow-x: hidden;

}

After this change, You have to restart your web server.

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)

How do I use a custom font in Ruby on Rails?

One method (outlined here) would be to add a fonts folder to app/assets, and then add it to the folders that your app will look for assets in by editing config/application.rb:

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")

Then move scriptina.ttf into app/assets/fonts and your asset-url helper will then be referencing a valid path to your font.

---

Related Topics