DEV Community

thomasvanholder
thomasvanholder

Posted on

Add Custom Tailwind CSS Fonts to your website

#tailwindcss #fonts #tutorial

Orginally published at Medium on March 17th 2020.

extend Tailwind CSS configuration with local fonts or Google Fonts

Barcelony font

Tailwind CSS offers developers powerful capabilities to build visually appealing websites in a short time frame. To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration.

To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration.

The default Tailwind classes include 3 different fonts. Font-sans is the default font that will be applied even when you donโ€™t explicitly set the font-sans class. If you want to add more fonts to custom your website, Tailwind got your back too!

To use a different font, you could either use an @import from Google fonts or import the fonts locally into your project. For example, when Google Fonts does not have the specific font, you are looking for.

Tailwind fonts

1a. Import Google Fonts

Visit Google Fonts and search for the specific font you like. Select the style variants from thin (100) to bold (900). Copy the import statement in between the style tags.

Google fonts how

Import the new font in the CSS file where you import tailwind classes, i.e., styles.css. Note, your fonts must be loaded at the top of the file.

Import

1b. Import local fonts

To create something more unique, find an appealing font that is not on Google Fonts, such as the handwritten Barcelony.

Create a fonts folder in the assets pipeline (i.e., assets/fonts). In the fonts folder, add one of your custom font files, for example:

  • .ttf for TrueType Fonts
  • .woff for Web Open Format
  • .otf for OpenType

With Rails the trick is explicitly to load the newly created font folder into the application. In the application.rb file add:

Rails

Make sure to restart the server.

Next, add the font to the bottom of the styles.css file.

Css

  • font-family is the name that will be set into the Tailwind config file.
  • src is the path where the local font can be found.

2. Overwrite or extend

You can either overwrite the default Tailwind fonts. Or you can extend and add your own. Using extend will add the newly specified font families without overriding Tailwindโ€™s entire font stack.

If your app is already built, it makes sense to overwrite the font, so you save yourself the need to re-visit every paragraph element on your website to add the custom class.

In your tailwind.config.js file, add the chosen font-family.

JS

Font-sans is now using Roboto. As Font-sans is the default, itโ€™s not necessary to explicitly include that class on an element. Additionally, a new font-heading class is added. As the font-heading class was non-existing, it will be created. You could also have chosen to add it within the extend curly braces.

Font-heading is the newly added Poppins font for our heading/titles. To apply the Poppins font, you can add to the base layer or include the class manually in the HTML where needed.

3. Apply styles

Apply

Apply styles globally. In the file where you import the Tailwind classes add:

Any <h1> tag will now by default have the Poppins font applied. Be aware of order specificity. If you have add a font-class, i.e. font-mono, in the HTML on the h1 tag itself, font-mono will overwrite the global defined font-heading class.

Thanks for reading!

*image source: https://www.dafont.com/barcelony.font

Top comments (8)

Collapse
 
arealclimber profile image
Lumii • • Edited

It works! Really appreciated!
I use the custom google font over all pages in NextJS.
My working example:
In globals.css:

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Ubuntu:wght@400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: Ubuntu;
    }
}
Enter fullscreen mode Exit fullscreen mode

In tailwind.config.js:

module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
        fontFamily: {
            'custom': ['ubuntu-mono', 'Ubuntu', 'sans-serif'],
        },
    },
    plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

That's all.

Collapse
 
kelcio profile image
Kelcio Barreto •

Thanks a lot! Very helpful article!

Collapse
 
edroviegas profile image
EdroViegas •

I registered myself just to say : This an mazing content , very useful , keep going this way. Thank You

Collapse
 
pathros profile image
Pathros • • Edited

How exactly do you import local .ttf font (path directory) into the tailwind.config.js file? I didn't get it.

Collapse
 
edanbenatar profile image
Edan Ben-Atar ๐Ÿ’ • • Edited

I'm not sure if that's possible. I know you can do something like this:

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter/Inter-VariableFont.ttf') fromat('truetype');
  }
}
Enter fullscreen mode Exit fullscreen mode

Would be cool to just add it at the config level!

Collapse
 
unlocomqx profile image
Mohamed Jbeli •

Is using font-url correct? It didn't work for me, I used url instead

Collapse
 
thomasvanholder profile image
thomasvanholder • • Edited

That's right, font-url does not seems to work anymore.

This is a working example:

@font-face {
  font-family: 'KonstantGrotesk';
  src: url("KonstantGrotesk.otf");
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mukadas profile image
Mukadas Maltiti •

Thank you for this

Read next

ayowandeapp profile image

Real-Time Notifications with Server-Sent Events (SSE) in Laravel and Vue.js

Ayowande Oluwatosin -

hax profile image

TryHackMe API Wizard Breach Walkthrough

haXarubiX -

miguelneto profile image

How to use Pacman on Arch Linux ๐Ÿš€

Miguel Neto -

code42cate profile image

Day 2: Docker Installation & Hello World!

Jonas Scholz -