[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 post images
[Rails] How to use enum
[Rails] How to use enum
How to introduce Basic authentication
How to terminate rails server
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
[Rails] How to use authenticate_user!
[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"
[Rails] How to use devise (Note)
[Rails] How to use flash messages
[rails] How to display db information
[Rails] How to prevent screen transition
How to use Ruby on Rails
How to deploy Bootstrap on Rails
[Rails] How to speed up docker-compose
[Rails] How to add new pages
[Rails] How to write exception handling?
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
[Rails] How to use Active Storage
[Rails] How to implement star rating
[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
[Rails] How to convert from erb to haml
[Rails] How to upload images using Carrierwave
How to insert a video in Rails
[Rails] How to use ActiveRecord :: Bitemporal (BiTemporalDataModel)
[Rails] How to display error messages individually
How to use MySQL in Rails tutorial
How to resolve errors when installing Rails 5.1.3
Preparing to introduce jQuery to Ruby on Rails
[rails] How to configure routing in resources
[rails] How to create a partial template
How to implement ranking functionality in Rails
[Note] How to use Rails 6 Devise + cancancan
How to implement image posting using rails
[Rails] How to use video_tag to display videos
[Rails] How to use helper method, confimartion
How to use credentials.yml.enc introduced in Rails 5.2
[Rails] How to translate devise into Japanese
How to build Rails 6 environment with Docker
How to build a Ruby on Rails development environment with Docker (Rails 6.x)
How to build a Ruby on Rails development environment with Docker (Rails 5.x)