[RUBY] Until you introduce fonts to Rails


There are many great free fonts on the net. I definitely want to use it to broaden the range of design expression. Therefore, we will introduce free fonts to Rails.

Introduction of font files

Here, the font file you want to install is smog.otf. Create a fonts folder in the public folder and place the font files there.

- public
    - fonts
        - smog.otf

Add the following code to your css file (sample.css in this case). The name of font-family can be set freely, this time let's say'Smog'. Also, format matches the format of the file.

format extension
format('woff') .woff
format('truetype') .ttf
format('opentype') .otf or.ttf
format('embedded-opentype') .eot
format('svg') .svg or.svgz


@font-face {
  font-family: "Smog";
  src: asset-url('/fonts/smog.otf') format('opentype');
  font-weight: normal;
  font-style: normal;

After that, you can use it by specifying the font with css as usual. The following is an example.


.foo h1 {
  font-family: 'Smog';


<div class="foo">

That's all, thank you for your hard work!

Recommended Posts

Until you introduce fonts to Rails
[Rails 5.x] How to introduce free fonts
Introduce Vue.js to Rails
Until you push to Github
How to introduce jQuery in Rails 6
I tried to introduce CircleCI 2.0 to Rails app
Introduce two-factor authentication to your Rails application
Basic Rails commands you want to learn
Preparing to introduce jQuery to Ruby on Rails
[Rails] Introduce Carrierwave
Introduce Rails Presenter
Introduce docker to the application you are creating
Introduce dotenv to Docker + Rails to manage environment variables
[Rails] How to easily introduce slick (slider function)
How to write Rails
Introducing CircleCI to Rails
Introducing Bootstrap to Rails 5
Introduce devise in Rails to implement user management functionality
An introductory book to read when you start Rails
How to uninstall Rails
Rails6 I tried to introduce Docker to an existing application
Nice to meet you.
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
[With back tricks] How to introduce React to the simplest Rails
Rails: You need to supply at least one validation error
# What to do if you accidentally do rails db: migrate: drop
What to do if you can't use the rails command
[rails] How to post images
[Rails] How to use enum
[Rails] How to install devise
[Rails] How to use enum
How to introduce Basic authentication
How to read rails routes
Introduce Maven to Tomcat project
How to use rails join
[Rails] Add column to devise
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
Pass parameters to Rails link_to
[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
Introduced gRPC client to rails
Introduction to RSpec-Everyday Rails Summary-
[Rails] How to use Scope
[Rails / Routing] How to refer to the controller in the directory you created
Why you need attr_accessor and why you don't (Thanks to Rails): Rails Tutorial Memorandum--Chapter 9
[PostgreSQL] If you want to delete the Rails app, delete the database first!
[Rails] How to introduce kaminari with Slim and change the design
The first thing to do before you can use Rails6 Ajax
[GCP] Until you push the local Docker image to the Container Registry
It may have been possible to introduce bootstrap to rails with this
[Rails] What to do if you can't get parameters with form_with
[Rails + Webpacker] I want to use images of assets! Until you can view the image in Vue.js