[Ruby] [Rails 5.x] How to install free fonts

less than 1 minute read

How to introduce free fonts into Rails

I wanted to introduce free fonts to my own portfolio, so I introduced them using the Qiita article as a reference. There is a feeling of renewal now… I created an article in hopes that it would be helpful for beginners.

My environment ・Ruby 2.5.3 ・Rails 5.2.2

1 Download free font files
2 Put the font file under app/assets/fonts
(app name)/app/assets/fonts

Place a font file such as hogehoge.ttf (or hoge.otf) in the fonts directory. In my case there was no fonts directory, so I created it with mkdir under assets.

3 Described in SCSS file

In SCSS,

custom.scss


@font-face {
  font-family:'hoge'; # font-family name is decided appropriately
  src: font-url('hogehoge.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Write like this: You can put it anywhere in the file. And

custom.scss


body {
  font-family: hoge;
}

The font-family name Describe it in the body and apply it to the whole body.

4 completed!

I think you can apply the free font by this procedure. It was surprisingly easy. If it is not reflected, please try restarting the server as appropriate!

5 Reference article

[For beginners] How to add a custom font to a Rails application