In almost every project, you are going to use Google fonts to make your website look beautiful. Adding new fonts in TailwindCSS is a bit tricky and unfortunately, the official documentation doesn’t explain this thing well enough. In this article, you will learn how to add Google fonts step by step with a working demo at the end.
Step 1: Choose Your Google Fonts
The very first step to adding new fonts is to go to Google Fonts and choose the fonts you want to use in your project. In this example, we are going to use a very popular and beautiful font called Poppins. After choosing your fonts, you need to get the import link from google fonts. Click on the + icon to create an import link.
After selecting the fonts, you will see a popup with a font to import and download. You have to get the URL to import the files. You need to get the @import URL to use in your project.
Step 2: Import Google Fonts into Tailwind Input File
The next is to add the URL to your Tailwind input file. So, go and add @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); at the top of the three layers of TailwindCSS.
|
1 2 3 4 5 6 7 8 |
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; |
Step 3: Add Font Name in Tailwind Config File
Now, go to your tailwind.config.js and extend the fontFamily. Add your font name with whatever you wanna call it but make sure you are using the exact font name that Google Fonts provided.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { fontFamily:{ 'primary': ['Poppins'] } }, }, plugins: [], } |
Step 4: Use Your Google Fonts in HTML
You have successfully imported the Google fonts into your TailwindCSS project. All you need to do is to use the fonts you imported. Your fonts will be available with the name you defined in the config file. In the example above, we have defined the font name as primary so we’ll be using `font-primary’ in our code. Here is an example of how you will be using the fonts.
|
1 2 3 4 5 6 7 8 9 10 |
<h1 class="text-2xl font-primary "> This heading is using Poppins Fonts </h1> |
The working demo of the above example is on play.tailwindcss.com.
Pro Tip:
You can add your imported fonts to the body tag if you want to use them on your entire web page.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body class="font-primary" > <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ipsam, facere a iusto consectetur molestiae rem corporis quia illo velit mollitia sunt qui ipsa vero sit ullam fugit et voluptatem? </p> </body> |
If you are wishing to override the existing default fonts with the new fonts you just imported, check this guide on official documentation.
Conclusion
Adding new fonts in TailwindCSS is not a difficult job at all but a bit tricky. You can add Google fonts in TailwindCSS by importing the Google fonts in your tailwind input file, defining the font name and using the imported fonts. In the end, use your fonts in your HTML.