[Rails] Custom font settings

Introduction

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

table of contents

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

Recommended Posts

[Rails] Custom font settings
[Rails] dependent settings
[Rails] Complete routing settings
[Rails] How to install Font Awesome
[Rails] Validation settings and Japanese localization
[Rails] How to install Font Awesome
How to use custom helpers in rails