How to use font from local files globally in Tailwind CSS ?
Last Updated :
10 Feb, 2023
Tailwind CSS provides a set of default font families that you can use in your projects. These font families are defined as utility classes in the form of font-{family-name} and can be easily applied to any HTML element.
These are the default fonts that are provided by the tailwind CSS:
- sans: sans-serif font family, including system fonts such as Arial, Verdana, and sans-serif.
- serif: serif font family, including system fonts such as Times New Roman, Georgia, and serif.
- mono: monospace font family, including system fonts such as Courier New, Lucida Console, and monospace.
we can use them by just including their class name in the HTML tags.
<p class="font-mono">
This is a paragraph with a monospace font.
</p>
but tailwind CSS is not only restricted to these three fonts even you can add your custom fonts locally there are no limitations to adding custom fonts.
Why local fonts?
- Your website or application’s performance and loading time can be enhanced by using local fonts in Tailwind CSS.
- By using locally stored fonts, the browser does not have to make additional requests to load the fonts from an external server
- Additionally, using local fonts can ensure that the font will be displayed correctly even if the external server is down or unavailable. It also can help in case of a slow internet connection.
Syntax:
fontFamily:{
glory: ["glory","sans-serif"],
pop: ["pop","sans"],
}
For Adding local fonts to your project you have to follow several steps. These steps are as follows
Step 1: Download the font locally in your machine that you want to use in your tailwind and Add the font files to your project’s assets(you can give any name as per your convenience) folder.
Step 2: Before implementation, we have to tell the tailwind the location of the font and assign the name to it. import the font files using the @font-face rule.
Step 3: Add the fonts in the tailwind.config.js file to use the fonts in the project and give them the name as you want but it’s recommended to give them the relevant names.
Step 4: use the specified font class for the custom font in the HTML tag . as a font-{family-name}
Folder structure :
How to use font from local files globally in Tailwind CSS
Example 1: This example shows how to use font from local files globally in Tailwind CSS.
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Custom Fonts</title>
</head>
<body>
<h1 class="text-green font-bold text-4xl m-8 font-pop">
Geeks For Geeks
</h1>
</body>
</html>
|
tailwind.config.js
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "pop";
src: url("../public/assets/pop.ttf");
}
@font-face {
font-family: "glory";
src: url("../public/assets/glory.ttf");
}
|
As you can see that we have included two fonts “pop”, and “glory” in the CSS file .ttf is the format of the fonts. In src include the address/location of the font that you have locally downloaded in your project directory of the assets folder.
input.css
CSS
module.exports = {
content: ["public/*.{html,js}"],
theme: {
extend: {
colors:{
'green': '#008000',
},
fontFamily :{
glory: ["glory","sans-serif"],
pop: ["pop","sans"],
}
},
},
plugins: [],
}
|
You should add your fonts as an array if somehow your specified font is not found in the directory then the second one is going to be applied, e.g “glory” is not found in the directory then the `sans-serif` going to apply. See the class we have added the pop font with the same name as specified in the config file with the prefix font `font-pop`
Output:
How to use font from local files globally in Tailwind CSS
Example 2: This example shows how to use font from local files globally in Tailwind CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Custom Fonts</title>
</head>
<body>
<h1 class="text-[#008000] text-4xl m-8 font-glory">Geeks For Geeks</h1>
</body>
</html>
|
tailwind.config.js
CSS
module.exports = {
content: ["public/*.{html,js}"],
theme: {
extend: {
colors:{
'green': '#008000',
},
fontFamily :{
glory: ["glory","sans-serif"],
pop: ["pop","sans"],
}
},
},
plugins: [],
}
|
input.css
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "pop";
src: url("../public/assets/pop.ttf");
}
@font-face {
font-family: "glory";
src: url("../public/assets/glory.ttf");
}
|
Output :
How to use font from local files globally in Tailwind CSS
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...