How to use font from local files globally in Tailwind CSS ?
Last Updated :
25 Sep, 2024
Tailwind CSS is a utility-first framework that comes with a wide range of pre-configured styles. Among these are default font families such as sans, serif, and mono, which offer system fonts like Arial, Times New Roman, and Courier New. These fonts can be easily applied to HTML elements by adding the corresponding class names, for example:
<p class="font-mono">
This is a paragraph with a monospace font.
</p>Adding Custom Local Fonts to Tailwind CSS
To include custom fonts in your Tailwind CSS project, follow these simple steps:
Step 1: Download the Font
First, download the font you wish to use. You can find free or licensed fonts from resources like Google Fonts, Font Squirrel, or even your custom font designs. Save the downloaded font files in your project’s assets folder or any other folder you prefer.
Step 2: Define Font in the CSS File
Once your fonts are stored locally, you need to define them using the @font-face rule in your CSS file.
Create or edit the input.css file where you’ll add the @font-face declarations. Ensure you correctly specify the file paths for each font.
Step 3: Update Tailwind Configuration
Next, you’ll need to update the tailwind.config.js file to make Tailwind aware of your custom fonts.
In your tailwind.config.js file, add the following code to the extend section under theme.fontFamily. Here, we’re defining two custom fonts—Glory and Pop—and setting a fallback to system fonts like sans-serif in case the custom fonts are not available.
Step 4: Use Custom Fonts in HTML
Now that your fonts are set up, using them in your HTML is as simple as applying the font-{family-name} utility class.
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.
HTML
<!--index.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 */
@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");
}
/* input.css */
/** @type {import('tailwindcss').Config} */
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*/
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["public/*.{html,js}"],
theme: {
extend: {
colors:{
'green': '#008000',
},
fontFamily :{
glory: ["glory","sans-serif"],
pop: ["pop","sans"],
}
},
},
plugins: [],
}
/* input.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
Similar Reads
How to use Google Fonts in Tailwind CSS?
Google Fonts in Tailwind CSS enhances webpage design with free and easy-to-use fonts. It provides a library of 1000+ fonts served by Google servers. Add the Google Fonts API link to your HTML file's <head>.Configure tailwind.config.js to include the font under fontFamily.Tailwind comes with th
4 min read
How to use Radial Gradient in Tailwind CSS ?
A radial gradient is a graphical effect where colors transition in a circular or elliptical pattern. By default, the first color starts at the center and fades out to the edge of the element. Tailwind CSS makes it easy to implement radial gradients with its utility classes. We can use the below appr
3 min read
How to Create Floating Label in Tailwind CSS?
A floating window, a "popup window" or "overlay window, " is a UI element that appears on top of a web. It temporarily interrupts the user's interaction with the underlying content to display important messages and information. To create a floating label using Tailwind CSS, you can utilize Tailwind'
2 min read
How to use @apply directive in Tailwind-CSS ?
Tailwind CSS is a popular utility-first CSS framework. It is a set of pre-defined CSS classes that can be used to quickly and easily style your HTML elements without having to write custom CSS code. The classes are organized into a set of utility classes that can be used to control the layout, spaci
3 min read
How to set a Global Font Family in ReactJS ?
In React Setting a global font family means defining a specific font style to be used throughout a website or application, ensuring consistent typography across all elements and text content. When seÂtting a global font family, developers speÂcify a single font that will be universally applieÂd acro
4 min read
How to Customize the Font Size in Tailwind CSS ?
Customizing font size in Tailwind CSS involves using the text-[size] utility class, where [size] can be predefined size identifiers like xs, sm, md, lg, xl, or numerical values. Additionally, you can extend the default font sizes in the configuration file for more customization. Syntax<p class="t
2 min read
How to use Tailwind CSS with esbuild ?
Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
3 min read
How to use Google Fonts in CSS ?
Google Fonts in CSS allows you to easily include and style web fonts by linking to a font's URL and applying it via the font-family property in your stylesheet. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc. The syntax for using Google Fonts in CSS
2 min read
How to Use Custom Percentages in Padding in Tailwind CSS?
We know that Tailwind CSS provides a utility-first approach for styling web applications, which makes it easy to apply styles directly in HTML. This article guide will explain how to use custom percentages in padding within Tailwind CSS. Approach: Using Custom Utility ClassesThis approach involves c
2 min read
How to enable dark mode in Tailwind CSS ?
Tailwind CSS offers built-in features for enabling dark mode, allowing developers to create a dark-themed version of their web pages. By configuring the dark mode setting in the Tailwind configuration file and using the dark class, specific elements can seamlessly switch to dark-themed styles. There
3 min read