HomeContact UsPortfolio

STYLING FONTS

Styling Fonts

We can change the font of the elements. But generally speaking, we have three main categories of font.

  1. Serif
  2. San-serif
  3. Monospace

Serif

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.

Serif

San-serif

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

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.

p {
  font-family: Arial, Helvetica, sans-serif;
}

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.

googleFonts

After that select the fonts which you want to use

How to select ?

Google Font style

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.

SelectGoogleFont

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.

p {
  font-family: 'Open Sans', sans-serif;
}