Welcome to our quick tutorial on using custom fonts in Tailwind CSS! Fonts are like the personality of your website, and with Tailwind CSS, you can easily give your site its own unique style. In this guide, we'll show you, step by step, how to add custom fonts to your Tailwind CSS project. Whether you're new to web development or just want to spruce up your design skills, we've got you covered. Let's get started!
Example 1
Incorporate a custom font into your CSS using the @import method. Remember to insert the URL for the Google Font CSS within the Tailwind directives file.
src/input.css _or _main.css or tailwind.css
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
After that, make sure to specify your custom font family in the tailwind.config.js file.
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
},
},
plugins: [],
}
Now, in your HTML file, apply the font-culpa class along with your Tailwind CSS classes.
Index.html
<div class="container mx-auto">
<h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>
Example 2
Integrate a custom font into your HTML file using the link method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Google Fonts</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">s
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
}
}
}
</script>
</head>
<body>
<div class="container m-12 mx-auto">
<h1 class="text-6xl font-culpa">Tailwind CSS 3</h1>
</div>
</body>
</html>
Read Also
How to Make a File Upload Button with Tailwind CSS
How to Create OTP Input with Tailwind CSS
Responsive Profile Settings UI Design with Tailwind CSS
Tailwind CSS Active Button After Click Example
Tailwind CSS Animated Search Form Example
Top comments (0)