Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Official way of adding custom fonts to Rails 4?

I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.

Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?

Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?

like image 263
Fellow Stranger Avatar asked Jan 21 '14 06:01

Fellow Stranger


People also ask

How do I add custom fonts to Swift 4?

Add this by drag and drop to your files on the left side of the project. Add your CUSTOM fonts to the info. plist file. Make sure that you've linked all custom fonts you need: "Build Phases" -> "Copy Bundle Resources" -> "+" add your font.


2 Answers

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.

like image 172
Nikhil Nanjappa Avatar answered Sep 22 '22 02:09

Nikhil Nanjappa


Just did it...

  1. Download and save the font files (eot, woff, woff2...) in your assets/fonts/ directory

    1. In your config/application.rb add this line config.assets.paths << Rails.root.join("app", "assets", "fonts")

What this does is it precompiles your fonts folder just as it does by default with your images, stylesheets etc.

  1. and make sure this line is set to true config.assets.enabled = true

  2. In your sass/scss or even inline with <script> tag

    @font-face {   font-family: 'Bariol Regular';   src: font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');   src: font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix') format('eot'),   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff') format('woff'),   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf') format('truetype'),   font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK') format('svg');   font-weight: normal;   font-style: normal; } 

Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets

Finally, set the font-family in your CSS files

body {    font-family: 'Bariol Regular', serif; }  

FREE TIP: This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader

like image 22
luigi7up Avatar answered Sep 18 '22 02:09

luigi7up