How To Use Google Fonts In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you how to use google fonts in HTML, in HTML, there is also a facility provided by google that is of fonts. This is named as google fonts and is for free, both for office use and personal use.
The website is named as Google fonts and its link is https://fonts.google.com/. Here by clicking on this link, a website gets open and you will see that here are many fonts with different styles.
All are free by google and you can use any of them. But you have to follow a procedure to use this fonts styles to your webpage and in this session, we will teach you that how you can use google fonts in your website.
Step By Step Guide On How To Use Google Fonts In HTML :-
As, many font styles are there. So you have to select the font which we want to use and by clicking on that a window opens, in which you have to select use this style option.
Also, there are many ways to use these fonts in your website, but we will teach you the easiest one. So, that by using only one procedure, you able to use all the fonts which you like to use.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<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=Fredoka:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div style=”font-size: 50px; font-family:’redressed’,cursive”>
This is the google font using link option
</div>
<div style=”font-size: 50px; font-family:'Dancing Script', cursive”>
You can choose different fonts for different texts.
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively. But before closing the head tag, we have to copy the content of link tag from website and have to paste it in head tag.
- But if you copy paste import file, then you have to paste respective import file for specific text, whereas if you use link file, then you can use any text without any extra problem means addition of file.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Now, in this we make two division and in the style of these divisions we use style and in the style we paste the css code that we copy from google website.
- You can find it under link file, and for every font the css file is different. So, for unique font to unique content, you have to give it its CSS. That can be given using internal, external or inline CSS.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that the google fonts is an easy way to choose a font style manually by a developer.
So, if you find same problem, the procedure is given above by us, you can go through this and hope that you understand codes properly and now able to use in your websites. I hope this tutorial on how to use google fonts in HTML helps you.
About Dikshita
