Elevate Your Rails 6 Application with Custom Fonts Using Webpacker
Adding custom fonts to your application can greatly enhance its visual appeal and make a bold statement. In this article, we will explore how to seamlessly import custom fonts into your Rails 6 Application with Webpacker. By the end of this tutorial, you’ll be able to effortlessly integrate custom fonts and give your application a unique touch.
Steps to Import Custom Fonts
Download the Font: Begin by downloading your desired font from a remote location. This could be a font repository or a trusted source like Font Meme.
Create a Fonts Folder: In your Rails project, navigate to the
app/javascript
directory and create a new folder calledfonts
. This is where we will store our custom font files.Create a Fonts SCSS File: Within the
fonts
folder, create a new SCSS file namedfonts.scss
. This file will be responsible for importing your fonts, including any external URLs if necessary.
Example: app/javascript/stylesheets/fonts/fonts.scss
@import url('../fonts/harringt.ttf');
- Specify the Font Family:
Open your application’s CSS file, such as
application.css
or a specific view’s CSS file, and define the font family you want to use.
Example: app/javascript/stylesheets/pages.css
.page-titles {
font-family: 'Harrington', cursive;
}
- Apply the Font to Your Application: To display the custom font, add the corresponding CSS class to the sections or elements where you want it to be used. Alternatively, you can apply the font to the entire body.
Example: app/views/pages/index.html.erb
<!-- pages/index.html.erb -->
<h1 class="page-titles">Custom Font</h1>
Conclusion: Unleash the Power of Custom Fonts
By following these simple steps, you can effortlessly import custom fonts into your Rails 6 Application using Webpacker. This allows you to infuse your application with personality and make a lasting impression on your users.
Special thanks to Font Meme for providing the Harrington font used in this example.
Source
My own dev.to post