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
(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.
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.
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!
[For beginners] How to add custom fonts to Rails application
Recommended Posts