As explained in the previous section, fonts are usually device-dependent. If users don't have the font which the website specified, a browser renders an alternative font. Web fonts are used as a solution to avoid inconsistencies by providing font data from the server side.
Google Font is a free web font service. You can access the website from here Google Font .
There are two options to use Google Font.
<link>
tag of HTML files.The first option is more common and easy to implement. In this course, we'll explain the first option.
Using API, you can quickly implement web fonts.
For example, select Roboto. You can see fonts with different weights (thickness) and styles.
Open the HTML file of your project with a text editor (e.g., VS Code), and paste the code into the head section.
<head>
:
<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=Roboto:xxxxxxxxxx=swap" rel="stylesheet">
:
</head>
Add the CSS code like shown below. The selector part is usually body
.
selector{
font-family: 'Roboto', sans-serif;
}
<link>
tags generated at the bottom right.Open the chapter11.html file with VS Code, and paste the copied code into the <head>
section. Also, add comments for code readability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google Font-->
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Custom CSS-->
<link rel="stylesheet" href="css/practice.css">
<title>11. CSS: Styling Text and Images</title>
</head>
Open the practice.css file and add the font-family
property to the <body>
element at the beginning of the CSS file.
body{
background-color:white;
color: #196060;
font-family: roboto, sans-serif;
}
You can also check the sample result here (Demo Site ).
As explained in the previous section, fonts are usually device-dependent. If users don't have the font which the website specified, a browser renders an alternative font. Web fonts are used as a solution to avoid inconsistencies by providing font data from the server side.
Google Font is a free web font service. You can access the website from here Google Font .
There are two options to use Google Font.
<link>
tag of HTML files.The first option is more common and easy to implement. In this course, we'll explain the first option.
Using API, you can quickly implement web fonts.
For example, select Roboto. You can see fonts with different weights (thickness) and styles.
Open the HTML file of your project with a text editor (e.g., VS Code), and paste the code into the head section.
<head>
:
<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=Roboto:xxxxxxxxxx=swap" rel="stylesheet">
:
</head>
Add the CSS code like shown below. The selector part is usually body
.
selector{
font-family: 'Roboto', sans-serif;
}
<link>
tags generated at the bottom right.Open the chapter11.html file with VS Code, and paste the copied code into the <head>
section. Also, add comments for code readability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google Font-->
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Custom CSS-->
<link rel="stylesheet" href="css/practice.css">
<title>11. CSS: Styling Text and Images</title>
</head>
Open the practice.css file and add the font-family
property to the <body>
element at the beginning of the CSS file.
body{
background-color:white;
color: #196060;
font-family: roboto, sans-serif;
}
You can also check the sample result here (Demo Site ).