Adding Custom fonts to Rails6 using webpacker

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.

1. Download the font from remote location.
2. Create a fonts folder in the path app/javascript/ folder.
3. 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.