Importing google fonts into your HTML code
Many beginners in programming often wonder how the professional websites use fonts that are generally not available on your PC. Well, here we are, and we are going to teach you exactly how to add different fonts without installing any new fonts on your PC.
Step 1:- Go to Google Fonts website.
Step 2:- Search for that font that you want or choose one from the opening page of Google Fonts website.
Step 3:- Click on the "Select this style" option given beside the font in its preview page.
Step 4:- After clicking on "Select this style", a sidebar will open and there will be a section called "Use on the web". Below that, there will be option between "link" and "@import". By default, "link" will be selected.
Step 5:- Copy the html link tag code given below the options and paste it inside your html head tag and you're good to go :)
Here is an example of how your code will look like.
By using the following code you can easily import any of the google fonts directly into your HTML code without any hurdles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tamma+2&display=swap"
rel="stylesheet">
</head>
<style>
p{
font-family: 'Baloo Tamma 2', cursive;
}
</style>
<body>
<p>
this is a paragraph
</p>
</body>
</html>
Comments
Post a Comment