In this section we will add google family fonts in tailwindcss. We will see both custom font @import and link method in tailwind css 3. First you need to install & setup tailwind or you can read How to install & setup Tailwind CSS v3.
Example 1
Add Custom font in CSS using @import method. you should add the google font css url in 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;
Next, you need to add fontfamily in your tailwind.config.js
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
},
},
plugins: [],
}
Index.html
<div class="container mx-auto">
<h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>
Example 2
Add Custom font in html file using 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>
Top comments (0)