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.
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 |
sample.css
@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.
sample.css
.foo h1 {
font-family: 'Smog';
}
erb:index.html.erb
<div class="foo">
<h1>hello!</h1>
</div>
That's all, thank you for your hard work!