Introduction

I changed the design using free fonts in application development, so I summarized how to use it.

1 Free font preparation 2 Font loading

1 Free font preparation

First, download what you want to use from the free font site. Then place the downloaded file (extension ttf or otf) under app / assets / fonts.

Notes

Each font has different terms of use. Even if it is commercially available, there are restrictions on the range of use, and there are some that need to be reported at the time of use, so please be sure to check the distribution page before using.

2 Font loading

Write the following in the CSS file.


@font-face {
  font-family: “abcdefg”;
  src: url('/assets/abcdefg.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}

Specify the font-family where you want to apply the font.

Example


p {
  font-family; “abcdefg”;
}

You have now applied the font.

3 Adaptation to production environment

Since the font was not applied in the production environment as it is, the following was changed.

`/config/production.rb`


#Change before
config.assets.compile = false
#After change
config.assets.compile = true

This made it possible to display image files that were not loaded in the production environment.

Reference link

https://qiita.com/dir_sh0606/items/ce605b70f1cb333f9d59 https://qiita.com/kinpin/items/bd7c9a7d7a739e297742

[Rails] Custom font settings