- Instant help with your CSS coding problems

Use font from local files in TailwindCSS

Question:
How to use font from local files in TailwindCSS?
Answer:
module.exports = {
  content: ['**/*.html'],
  theme: {
    fontFamily: {
      lumanosimo: ["Lumanosimo", "sans-serif"],
    },
    extend: { },
  },
  plugins: [],
}
Description:

There could be many reasons why you want to use a font from local files globally. If you are looking for a way to improve the performance and branding, or want more control of your website, then using a local font is a good option.

In TailwindCSS, you can use a font from a local file in two main steps.
The prerequisite is that you have saved the selected font to a directory under the project folder. In this example, I'll use the Lumanosimo font, which I saved in the assets/fonts folder.

Step 1. Edit the main tailwind.css file.

Add a @font-face block right after the @tailwind rules with the proper values. 

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

@font-face {
  font-family: "Lumanosimo";
  src: url("../assets/fonts/Lumanosimo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Step 2. Edit the tailwind.config.js

Now edit the configuration file - tailwind.config.js - and insert a new fontFamily into the theme block.

module.exports = {
  content: ['**/*.html'],
  theme: {
    fontFamily: {
      lumanosimo: ["Lumanosimo", "sans-serif"],
    },
    extend: { },
  },
  plugins: [],
}

Usage

Now you can use the fonts like this:

<p class="font-lumanosimo">This is my font loaded from a local file</p>

 

Share "How to use font from local files in TailwindCSS?"
Interesting things
OpanAi's ChatGPT