CSS Google Font
CSS
Google Fonts provides free, open-source, and easily embeddable fonts that serve as alternatives to standard web-safe fonts.
Google font
➔ Google Fonts are web fonts that are freely available for personal and commercial use.
➔ Google Fonts provides the API and has over 1300 fonts to choose from.
How to use Google font (Two steps):
1. Add a stylesheet link to load the desired web font(s):
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
2. Style an element using web fonts, either in an internal stylesheet, external stylesheet, or in an inline style.
Use it in the link tag inside the head.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
div {
font-family: 'Tangerine', serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<div>Google Fonts make the web beautiful!</div>
</body>
</html>
Or use @import rule in style tags inside the head (alternatively).
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Tangerine');
</style>
<style>
div {
font-family: 'Tangerine', serif;
font-size: 40px;
}
</style>
</head>
<body>
<div>Google Fonts make the web beautiful!</div>
</body>
</html>
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>Google fonts example</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Great+Vibes">
<style>
p {
font-family: "Great Vibes", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<h3>Google fonts example</h3>
<p class="p1">Google Fonts make the web beautiful!</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Result
How to use multiple Google fonts:
1. Add a stylesheet link to load the desired web font(s):
<link rel="stylesheet" href="https://fonts.googleapis.com/csshttps://fonts.googleapis.com/css?family=Bungee|Great+Vibes|Imperial+Script|Momo+Signature|Roboto">
2. Style an element using web fonts, either in an internal stylesheet, external stylesheet, or in an inline style.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>Google multiple fonts example</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Bungee|Great+Vibes|Imperial+Script|Momo+Signature|Roboto">
<style>
.p1 {
font-family: "Roboto", sans-serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p2 {
font-family: "Imperial Script", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p3 {
font-family: "Momo Signature", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p4 {
font-family: "Great Vibes", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p5 {
font-family: "Bungee", sans-serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<h3>Google multiple fonts example</h3>
<p class="p1">Google Fonts make the web beautiful!</p>
<p class="p2">Google Fonts make the web beautiful!</p>
<p class="p3">Google Fonts make the web beautiful!</p>
<p class="p4">Google Fonts make the web beautiful!</p>
<p class="p5">Google Fonts make the web beautiful!</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
How to activate Google Fonts font effects.:
Note: A browser may not support certain font-effects, try different effects in a different browser.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>Google fonts effect example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float|fire|neon">
<style>
p {
font-family: "Rancho", cursive;
font-size: 50px;
}
</style>
</head>
<body>
<h3>Google fonts effect example</h3>
<h4>Note: A browser may not support certain font-effects, try different effects in a different browser.</h4>
<p class="font-effect-shadow-multiple">Google Fonts make the web beautiful!</p>
<p class="font-effect-3d-float">Google Fonts make the web beautiful!</p>
<p class="font-effect-neon">Google Fonts make the web beautiful!</p>
<p class="font-effect-fire">Google Fonts make the web beautiful!</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Common Google Font Effects
| Effect Name | Class Name |
|---|---|
| anaglyph | font-effect-anaglyph |
| canvas-print | font-effect-canvas-print |
| emboss | font-effect-emboss |
| fire | font-effect-fire |
| fire-animation | font-effect-fire-animation |
| neon | font-effect-neon |
| outline | font-effect-outline |
| shadow-multiple | font-effect-shadow-multiple |
| 3d | font-effect-3d |
| 3d-float | font-effect-3d-float |
How to use Google fonts (Recommended):
Latest Modern and Easy way.
1. Go to this link Select Google Fonts Select the desired web font(s) -> Click Get Font -> Click Embed Code.
2. Then, copy all the link tags (shown in the picture bellow) to paste in the head section of your code and then copy the font-family: "fontname", familyname; line (shown in the picture bellow) and paste it in the inline, internal or external style section to use the font for elements.
How to use multiple Google fonts:(Modern and recommended way)
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>Google multiple fonts example Recommended way</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Bungee&family=Great+Vibes&family=Imperial+Script&family=Momo+Signature&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<style>
.p1 {
font-family: "Roboto", sans-serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p2 {
font-family: "Imperial Script", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p3 {
font-family: "Momo Signature", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p4 {
font-family: "Great Vibes", cursive;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
.p5 {
font-family: "Bungee", sans-serif;
font-size: 40px;
text-shadow: 4px 4px 4px #aaa;
}
</style>
</head>
<body>
<h3>Google multiple fonts example Recommended way</h3>
<p class="p1">Google Fonts make the web beautiful!</p>
<p class="p2">Google Fonts make the web beautiful!</p>
<p class="p3">Google Fonts make the web beautiful!</p>
<p class="p4">Google Fonts make the web beautiful!</p>
<p class="p5">Google Fonts make the web beautiful!</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.