How to Add Google Fonts to Your HTML Website
Google Fonts allows you to easily add beautiful typography to your website. Below, we’ll go through how to integrate Google Fonts into an HTML document using both the <link> method and the @import method in CSS.
Method 1: Using the <link> Method (Recommended)
The easiest way to add Google Fonts to your website is by using the <link> tag in your HTML <head>.
Step 1: Choose a Font from Google Fonts
- Go to Google Fonts.
- Search for a font (e.g., “Poppins”).
- Click “Select”, then copy the
<link>tag provided.
Step 2: Add the Font Link to Your HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using Google Fonts</title>
<meta name="description" content="Learn how to add and use Google Fonts in your HTML website with simple steps. Includes example code and best practices.">
<meta name="keywords" content="Google Fonts, HTML CSS fonts, add Google Fonts, web typography, custom fonts in HTML">
<!-- Google Fonts Link -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Using Google Fonts in HTML</h1>
<p>This is an example of text using the 'Poppins' font from Google Fonts.</p>
</body>
</html>
Step 3:Using @import in CSS
You can also add Google Fonts using the @import method in your CSS file.
Step 1: Import Google Font in CSS
Add the following line at the beginning of your CSS file:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
h1 {
font-weight: 700; /* Bold */
color: #333;
}
p {
font-weight: 400; /* Regular */
color: #555;
}
When to Use @import?
- Use it when you prefer keeping all styles inside your CSS file.
- The
<link>method is still recommended for better performance.