DEV Community

Cover image for Adding Custom fonts to Rails6 using webpacker
웃

Posted on • Updated on

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')
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Thats it! You have embedded custom fonts into your Rails application.

Thanks to Font Meme for Harrington font.

Discussion (0)