Adding custom fonts to you application stands out and makes a statement. In this article I would like to tell how to import custom fonts into your Rails 6 Application with Webpacker.
- Download the font from remote location.
- Create a
fonts
folder in the path app/javascript/ folder. - Create a SASS file fonts.scss and specify location of your font, add import from external urls as well. - I prefer using seperate file for importing all my fonts
app/javascript/stylesheets/fonts/fonts.scss
@import url('../fonts/harringt.ttf')
Specify the font family in your application.css or specific views of a controller.
app/javascript/stylesheets/pages.css
.page-titles {
font-family: 'Harrington', cursive;
}
Finally, add CSS class to to sections you want to display in particular font or whole body.
app/views/pages/index.html.erb
<!-- pages/index.html.erb -->
<h1 class="page-titles">Custom Font</h1>
Thats it! You have embedded custom fonts into your Rails application.
Thanks to Font Meme for Harrington font.
Top comments (0)