[Rails 5.x] How to introduce free fonts

How to introduce free fonts to Rails

I wanted to introduce free fonts to my portfolio, so I introduced it with reference to the Qiita article. There is a feeling of renewal now, but ... a memorandum and I created an article in the hope that it will be helpful for beginners.

Writer's environment ・ Ruby 2.5.3 ・ Rails 5.2.2

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

Put a font file like hogehoge.ttf (or hoge.otf) in the fonts directory. In my case, I didn't have the fonts directory, so I created it with mkdir under assets.

3 Described in the SCSS file

To SCSS,

custom.scss


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

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

custom.scss


body {  
  font-family: hoge;
}

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

4 Completed!

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

5 Reference article

[For beginners] How to add custom fonts to Rails application

Recommended Posts

[Rails 5.x] How to introduce free fonts
Until you introduce fonts to Rails
How to introduce jQuery in Rails 6
How to write Rails
Introduce Vue.js to Rails
How to uninstall Rails
[Rails] How to easily introduce slick (slider function)
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to read rails routes
How to terminate rails server
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
How to write Rails routing
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
[Rails] How to use Scope
[With back tricks] How to introduce React to the simplest Rails
[Rails] How to use gem "devise"
How to deploy jQuery on Rails
[Rails] How to install Font Awesome
[Rails] How to use devise (Note)
[Rails] How to use flash messages
[rails] How to display db information
[Rails] How to write in Japanese
[Rails] How to prevent screen transition
How to deploy Bootstrap on Rails
[Rails] How to speed up docker-compose
[Rails] How to add new pages
Rails on Tiles (how to write)
[Rails] How to write exception handling?
[Rails] How to install ImageMagick (RMajick)
[Rails] How to use Active Storage
[Rails] How to implement star rating
How to return Rails API mode to Rails
How to get along with Rails
[Introduction to Rails] How to use render
How to install Swiper in Rails
[Rails] How to introduce kaminari with Slim and change the design
How to implement search functionality in Rails
How to change app name in rails
I tried to introduce CircleCI 2.0 to Rails app
How to use custom helpers in rails
[Ruby on Rails] How to use CarrierWave
[Rails] How to convert from erb to haml
[Rails] How to use rails console with docker
Introduce two-factor authentication to your Rails application
How to insert a video in Rails
[Rails] How to use ActiveRecord :: Bitemporal (BiTemporalDataModel)
[Rails] How to use the map method
[Rails] How to display error messages individually
How to use MySQL in Rails tutorial
How to resolve errors when installing Rails 5.1.3