DEV Community

loading...
Cover image for Adding Custom fonts to Rails6 using webpacker

Adding Custom fonts to Rails6 using webpacker

gokucodes profile image Updated on ・1 min read

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)

pic
Editor guide