CSS Google Fonts is a service by Google that provides a diverse collection of web fonts for free. It allows web developers to easily integrate custom fonts into their websites using CSS. Google Fonts, launched in 2010, is the largest free and open-source font library online, available for personal and commercial use.
Google Fonts provides us with API, we have to call that API so that we get a JavaScript file or say script file which we have to include in our HTML code so that we can use different Google fonts.
How to Add Google Fonts to CSS?
Two common methods can be used to use Google fonts in our HTML files.
We will explore all the above methods along with their basic implementation with the help of examples.
Add Google Fonts using Link Tag in CSS
In this approach, we are using the Google Fonts Link Tag in the HTML <head> section to import the font, and then use it in the CSS styles.
Syntax:
<link href=’https://fonts.googleapis.com/css?family=Font+Name’ rel=’stylesheet’>
Note: Replace Font+Name with the name of the font you want to use.
Example 1: Here is the basic example of using Google fonts by link tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Google Fonts</title>
<link href=
'https://fonts.googleapis.com/css?family=Roboto|Pacifico|Lobster'
rel='stylesheet'>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
color: #2c3e50;
text-align: center;
}
h1 {
font-family: 'Lobster', cursive;
color: #27ae60;
margin-bottom: 20px;
}
p {
font-family: 'Pacifico', cursive;
color: #34495e;
font-size: 1.2rem;
margin: 0;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
</body>
</html>
Output:
Adding Google Font Effects
In this apporach, we use four headers (h1) styled with different effects from the "Sofia" font-family: 3D,fire,fire-animation,emboss, and shadow-multiple, all displaying the text "GeeksforGeeks."
Note: To apply special font effects from the Google API, add effect=effectname to the URL. Then use the class "font-effect-effect name" for elements that will have the specific effect applied.
Example: In this example we are using above-explained method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Google Fonts with Text Effects</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=3d|fire|fire-animation|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
text-align: center;
color: #2c3e50;
}
h1 {
margin: 10px 0;
}
</style>
</head>
<body>
<h1 class="font-effect-3d">GeeksforGeeks</h1>
<h1 class="font-effect-fire">GeeksforGeeks</h1>
<h1 class="font-effect-fire-animation">GeeksforGeeks</h1>
<h1 class="font-effect-emboss">GeeksforGeeks</h1>
<h1 class="font-effect-shadow-multiple">GeeksforGeeks</h1>
</body>
</html>
Output:
Styling Google Fonts
In this approach, we link the "Audiowide" font from Google Fonts and applies it to the entire webpage's text using CSS. The font size is set to 20px, and there's a text shadow for added visual effect.
Example: In this example we are using the above-explained apporach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Google Fonts with Text Shadow</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f5f5f5;
color: #2c3e50;
text-align: center;
}
h1 {
text-shadow: 4px 4px 4px gray;
margin: 10px 0;
color: #27ae60;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
Using Multiple Google Fonts
In this approach, we are using Google Fonts to import six different font styles and applies them to <h1> elements with corresponding classes. Each <h1> showcases a distinct font, creating varied typography styles for headings.
Example: In this example we are using above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Google Fonts Showcase</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong|Indie+Flower|Pacifico|Kaushan+Script">
<style>
body {
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f5f5f5;
color: #2c3e50;
text-align: center;
}
h1 {
margin: 10px 0;
font-size: 2rem;
}
h1.font1 {
font-family: "Audiowide", sans-serif;
color: #27ae60;
}
h1.font2 {
font-family: "Sofia", sans-serif;
color: #2980b9;
}
h1.font3 {
font-family: "Trirong", serif;
color: #8e44ad;
}
h1.font4 {
font-family: "Indie Flower", cursive;
color: #e74c3c;
}
h1.font5 {
font-family: "Pacifico", cursive;
color: #f39c12;
}
h1.font6 {
font-family: "Kaushan Script", cursive;
color: #d35400;
}
</style>
</head>
<body>
<h1 class="font1">GeeksforGeeks</h1>
<h1 class="font2">GeeksforGeeks</h1>
<h1 class="font3">GeeksforGeeks</h1>
<h1 class="font4">GeeksforGeeks</h1>
<h1 class="font5">GeeksforGeeks</h1>
<h1 class="font6">GeeksforGeeks</h1>
</body>
</html>
Output:
Add Google Fonts using @import in CSS
In this approach, we are using the @import rule in your CSS file to import the Google Fonts, and then apply it to the desired elements.
Syntax:
@import url('https://fonts.googleapis.com/css?family=Lobster');Example 1: Here we are using the @import method to add different Google fonts in our code example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Google Fonts</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Pacifico&family=Lobster&display=swap');
body {
margin: 0;
padding: 20px;
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
color: #2c3e50;
text-align: center;
}
h1 {
font-family: 'Lobster', cursive;
color: #27ae60;
margin-bottom: 20px;
}
p {
font-family: 'Pacifico', cursive;
color: #34495e;
font-size: 1.2rem;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
Output:
Similar Reads
CSS Web Fonts CSS Web fonts allow the use of different fonts, which are not installed on the local system. After choosing the not installed font, just include the font file on the web server and it will be automatically downloaded when needed. Syntax: @font-face { font details}Types of Font Formats: There are man
4 min read
CSS Fonts CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typographyKey Properties of CSS FontsTo customize fonts effectively in web design, it’s crucial to understand
4 min read
CSS Fonts CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typographyKey Properties of CSS FontsTo customize fonts effectively in web design, it’s crucial to understand
4 min read
How to use Google Fonts in CSS? Google Fonts in CSS allows you to easily include and style web fonts by linking to a font's URL and applying it via the font-family property in your stylesheet. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc.The syntax for using Google Fonts in CSS i
2 min read
CSS @font-face rule The @font-face rule in CSS is used to include custom fonts on web pages. This allows you to use any font without needing it to be installed on the user's device, ensuring that your web design stays consistent with your brand's typography.By adding custom fonts, you can create unique designs, maintai
3 min read
CSS @font-face rule The @font-face rule in CSS is used to include custom fonts on web pages. This allows you to use any font without needing it to be installed on the user's device, ensuring that your web design stays consistent with your brand's typography.By adding custom fonts, you can create unique designs, maintai
3 min read