Add Google Fonts using Link Tag in CSS
In this approach, we are using the Google Fonts link 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> <head> <title>CSS Google fonts</title> <link href= 'https://fonts.googleapis.com/css?family=Roboto|Pacifico' rel='stylesheet'> <style> h1 { font-family: 'Lobster', cursive; } p { font-family: 'Pacifico', cursive; } </style> </head> <body> <h1>w3wiki</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 “w3wiki.”
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> <head> <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; } </style> </head> <body> <h1 class="font-effect-3d"> w3wiki </h1> <h1 class="font-effect-fire"> w3wiki </h1> <h1 class="font-effect-fire-animation"> w3wiki </h1> <h1 class="font-effect-emboss"> w3wiki </h1> <h1 class="font-effect-shadow-multiple"> w3wiki </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> <head> <link rel="stylesheet" href= "https://fonts.googleapis.com/css?family=Audiowide"> <style> body { font-family: "Audiowide", sans-serif; font-size: 20px; text-shadow: 4px 4px 4px gray; } </style> </head> <body> <h1>w3wiki</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> <head> <link rel="stylesheet" href= "https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong|Indie+Flower|Pacifico|Kaushan+Script"> <style> h1.font1 { font-family: "Audiowide", sans-serif; } h1.font2 { font-family: "Sofia", sans-serif; } h1.font3 { font-family: "Trirong", serif; } h1.font4 { font-family: "Indie Flower", cursive; } h1.font5 { font-family: "Pacifico", cursive; } h1.font6 { font-family: "Kaushan Script", cursive; } </style> </head> <body> <h1 class="font1"> w3wiki </h1> <h1 class="font2"> w3wiki </h1> <h1 class="font3"> w3wiki </h1> <h1 class="font4"> w3wiki </h1> <h1 class="font5"> w3wiki </h1> <h1 class="font6"> w3wiki </h1> </body> </html> |
Output:
Contact Us