Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use Google Fonts on your web page?
Google Fonts is a free web font service launched by Google in 2010 that provides access to over 1,500 font families. You can easily integrate these fonts into your web pages using the <link> element or CSS @import rule to enhance your website's typography.
Syntax
/* Method 1: Using link element in HTML head */
<link href="https://fonts.googleapis.com/css2?family=Font+Name&display=swap" rel="stylesheet">
/* Method 2: Using CSS @import */
@import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');
/* Apply the font */
selector {
font-family: "Font Name", fallback-font;
}
Method 1: Using Link Element
The most common method is to include Google Fonts using the <link> element in your HTML head section −
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
line-height: 1.6;
padding: 20px;
}
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Google Fonts Example</h1>
<p>This text uses the Roboto font family from Google Fonts.</p>
<p class="bold-text">This text is bold using Roboto 700 weight.</p>
</body>
</html>
A webpage displaying text in the Roboto font family, with clean, modern typography. The first paragraph appears in regular weight, and the second paragraph appears in bold (700 weight).
Method 2: Using CSS Import
You can also import Google Fonts directly in your CSS using the @import rule −
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
.cursive-heading {
font-family: "Dancing Script", cursive;
font-size: 2.5em;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin: 30px 0;
}
.normal-text {
font-family: Arial, sans-serif;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<h1 class="cursive-heading">Welcome to Our Website</h1>
<p class="normal-text">The heading above uses Dancing Script font from Google Fonts.</p>
</body>
</html>
A webpage with an elegant cursive heading "Welcome to Our Website" in Dancing Script font, followed by normal Arial text explaining the font usage.
Multiple Font Families
You can load multiple font families in a single request by combining them in the URL −
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&family=Merriweather:wght@400&display=swap" rel="stylesheet">
<style>
.heading {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 2em;
color: #34495e;
margin-bottom: 20px;
}
.content {
font-family: "Merriweather", serif;
font-size: 16px;
line-height: 1.8;
color: #555;
}
.light-text {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-size: 14px;
color: #7f8c8d;
margin-top: 15px;
}
</style>
</head>
<body>
<h1 class="heading">Article Title</h1>
<p class="content">This paragraph uses Merriweather, a serif font that's perfect for readable body text.</p>
<p class="light-text">This footer text uses Poppins light weight for a subtle appearance.</p>
</body>
</html>
A webpage demonstrating typography hierarchy with a bold Poppins heading, readable Merriweather body text, and light Poppins footer text.
Best Practices
Always include fallback fonts in your
font-familydeclarationUse
display=swapparameter for better loading performanceLimit the number of font families and weights to improve page load speed
Test font readability across different devices and screen sizes
Conclusion
Google Fonts provides an easy way to enhance your website's typography with professional, web-optimized fonts. Use the <link> method for better performance, and always include appropriate fallback fonts for optimal user experience.
486 Views
