DEV Community

Cover image for Adding Custom fonts to Rails6 using webpacker
웃

Posted on • Edited on

1 1

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more