Use font from local files in TailwindCSS
module.exports = {
content: ['**/*.html'],
theme: {
fontFamily: {
lumanosimo: ["Lumanosimo", "sans-serif"],
},
extend: { },
},
plugins: [],
}
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>
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS