Fonts are an essential part of your website’s design, acting as a key element of its personality. Tailwind CSS makes it simple to customize your site with unique fonts, allowing you to create a distinctive style with ease. In this tutorial, we’ll guide you step-by-step on how to add custom fonts to your Tailwind CSS project. Whether you’re new to web development or looking to enhance your design skills, this guide is for you.
1. Adding Custom Fonts to Your Tailwind CSS Project
The @import Method
The first method involves importing the custom font via CSS. Here’s how you can integrate a Google Font using the @import rule.
Step 1: Import the Font
Insert the Google Font URL into your Tailwind CSS file. This could be src/input.css, main.css, or tailwind.css.
src/input.css
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;Step 2: Configure Tailwind to Use the Custom Font
Next, define your custom font in the tailwind.config.js file to extend Tailwind’s default theme.
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive'],
},
},
},
plugins: [],
}Step 3: Apply the Font in HTML
Now, you can use the custom font in your HTML by applying the font-culpa class along with other Tailwind CSS classes.
View Demo: https://play.tailwindcss.com/JZFR6ItV2k
<h1 class="text-4xl font-culpa">Tailwind CSS Custom Font</h1>
2. The <link> Method
Another method to integrate custom fonts is by using the <link> tag directly in your HTML.
Step 1: Add the Font Link
Include the Google Fonts link in the <head> section of your HTML document.
index.html
<!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">
<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 </h1>
</div>
</body>
</html>Conclusion
Integrating custom fonts in Tailwind CSS is straightforward and enhances your web design, giving your projects a unique look and feel. By following the steps outlined above, you can easily incorporate Google Fonts or any custom fonts into your projects.
