In this tutorial we will show you the solution of how to use google fonts in css, as we know css used to style html elements, here we used internal style method to show demo.
Fonts is the main thing in websites because when our website had beautiful or formal it depends on font looks it will covers all viewers attention so we need to know how to use them in html page.
Fonts are available in google it is a open source so we can easily use by import needed font style on head block of our webpage.
Step By Step Guide On How To Use Google Fonts In CSS :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
Here we used internal style method and in our program we defined two <p> tags with some texts and attribute classes ‘txt1 and txt2’.
By using them we put’s ‘League Gothic, Smooch’ font styles on it by style property ‘font-family’. Then we defined separately fonts for respective <p> tag texts so both font styles we can see on display.
<!DOCTYPE html>
<html>
<head>
<title>GOOGLE FONTS</title>
<link href="https://fonts.googleapis.com/css2?family=League+Gothic&family=Smooch&display=swap" rel="stylesheet">
<style>
.txt1{
font-family: 'League Gothic', sans-serif;
}
.txt2{
font-family: 'Smooch', cursive;
}
</style>
</head>
<body>
<p class="txt1">here i show you what is word wrap and how it is useful for you.</p>
<p class="txt2">here i show you what is word wrap and how it is useful for you.</p>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- When we use font from google we needs to import font <link> they provide at <head> section and define ‘font-family’ style property so we can use that style on webpage at any particular line of text or whole website refers (*).
- Within <style> tag we defined font style for each <p> para line with different fonts using ‘font-family’ style property with respective values ‘League Gothic and Smooch’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here two <p> tag we defined with class attributes ‘txt1,txt2’ and its styled by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to use google fonts in css.
When we load our program we need internet connection also because we imported fonts from googleapis then only we can see the style of font.
In google fonts site available more different styles of fonts so we can browse and pick any of them to use in our webpage and don’t forget to import and define them.
Here we used two styles of font only we can use any number of font styles also in one website.
I hope this tutorial on how to use google fonts in css helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
