We can change the font of the elements. But generally speaking, we have three main categories of font.
Serif font have a small stoke the end of characters. That’s Why they’re more professional and more serious.
Example : Georgia, Times new roman, etc.
San-serif font’s don’t have small stoke at the end. They’re more playful and modern
Example : Avenir, Arial, Futura, Helvetica, Roboto, etc..
Monospace means one space. These fonts are a little bit different from the fonts in other categories, in the sense that the width of all characters is exactly the same.
The above font stack is a example.
If font stack consists of multiple fonts, the first font is arial here.So when the browser sees this, it checks to see if this font is installed on the user’s computer. If it is available it’s going to apply to the paragraph element. Otherwise it’s going to look at the next font in the stack.In this case, Helvetica. Once again, if this font is available it’s going to be applied. Otherwise, the browser is going to look at the next font in the list or in the stack. Now the last font that we type here is a generic font, which can be either sans serif, serif, or monospace.
How to use google fonts
So hard over to https://fonts.google.com/ on that page, we can see the trending fonts.
so roboto and open sans are two of the most popular fonts, we can also search for fonts by its name, like open sans or we can browse.
After that select the fonts which you want to use
How to select ?
In the above image you can see the option on left side ( + select this style), after selecting the font’s on right side you will get all the instructions on using this fonts. side bar as shown in below image.
Now, to use his, we are going to copy these two links which is showing in above image, copy and put them in our index.html file in the head section, we are going to past it before the links to our style sheets, because these fonts should be loaded before we can use them in our stylesheet.
After that we can use this fonts like a regular fonts. As shown below.