How to use google fonts in Tailwind CSS ?
Last Updated :
10 Apr, 2023
In this article, we will see how to use Google fonts on our webpage and gives it a unique look. Google Fonts is a free, open-source library of over 1000 font families that can be used on websites. The fonts are served by Google servers and can be easily integrated into a website by including a link to the Google Fonts API in the HTML file. It only takes a few lines of code to use Google Fonts on your website’s HTML or CSS files. You can alter the typography to suit your design requirements by selecting from a variety of font types, weights, and sizes. Advanced features like font subsets, which let you choose particular characters or languages for your font, and font loading strategies, which improve website speed, are also available with Google Fonts.
Tailwind comes with three default font styles, they are font-sans, font-serif, and font-mono.
- Â Font-sans: This font family is a set of sans-serif fonts that are designed to be easy to read on screens. Sans-serif fonts are commonly used for web and mobile interfaces as they are legible and easy to read on small screens.
- Â Font serif: This font family is a set of serif fonts that are designed for print documents. Serif fonts have small lines or flourishes at the end of the strokes of the letters, which makes them more elegant and suitable for print documents.
- Â Font-mono: This font family is a set of monospace fonts that are designed for code and other technical documents. Monospace fonts have the same width for all characters, which makes them ideal for displaying code and other technical information.
Syntax:
variableName: ['Lato', 'sans-serif']
To use Google fonts, you just need to set up Tailwind-CSS in your system you can refer to this article “How to set up Tailwind-CSS with Vite?“.
Once you install tailwind the project structure will be the same as the below image
Steps to apply Google font style in tailwind CSS:
Step 1: Find your Google font family: To find out your desired font family go to Google font. Once you get into the google fonts webpage, you can either search for font family or scroll throughout the page and select your desired font family.
Step 2: Select font style: Now, you find out the font family that you wanna use, click on that font family, and select the font styles according to thickness and boldness that are required for the webpage.
Step 3: Check the selected font styles: After selecting font styles a side window pop-up that consists of all the links and rules to use Google fonts. If the side window doesn’t show up then click on the button at the right-top(also shown in the image attached) of the webpage.
Step 4: Copy the link tag: In the side window, all the necessary link and rules are written which needs to be copied and then pasted into the HTML into the head tag.Â
Â
Step 5: Extend font family: To extend the font family in Tailwind, we need to configure the tailwind.config.js file and add the rules that were mentioned in the side window of the google fonts webpage.
Javascript
module.exports = {
content: ["*"],
theme: {
extend: {
fontFamily: {
"lato": ['Lato', 'sans-serif']
}
},
},
plugins: [],
}
|
We can check for CSS rules to specify families at the bottom of the side window.
Project Structure:Â
How to use google fonts in Tailwind CSS ?
Step 6: Test new Google fonts:
npm run start
Example 1: In this example, we used lato font family from Google fonts.
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">
<title>Welcome to GFG</title>
<link rel="stylesheet" href="style.css">
<link href="/dist/output.css" rel="stylesheet">
<link rel="preconnect" href=
<link rel="preconnect" href=
<link href=
rel="stylesheet">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen">
<div class="bg-green-700 p-8 text-3xl
font-lato rounded-2xl shadow-2xl">
<p>Welcome to Geeks for Geeks</p>
</div>
</div>
</body>
</html>
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
|
Output:
How to use google fonts in Tailwind CSS ?
Example 2: In this example, we have used the Tilt Prism font family from google fonts.Â
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">
<title>Welcome to GFG</title>
<link href="/dist/output.css" rel="stylesheet">
crossorigin>
<link href=
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen">
<div class="bg-green-700 p-8 text-3xl
font-tilt_prism rounded-2xl shadow-2xl">
<p>Welcome to Geeks for Geeks</p>
</div>
</div>
</body>
</html>
|
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
|
Output:
How to use google fonts in Tailwind CSS?
Share your thoughts in the comments
Please Login to comment...