How to use google fonts

Font family (Typefaces) is an important part for Typography and google fonts become popular in the latest web technology enhancing Typography.  Today I will write about quick use of google fonts.

Step 1:

Go to the link: https://www.google.com/fonts

Step 2:

You will see a long list of font family and under each font family you will see 3 small icons in right bottom side. Click on the middle icons which title is Quick-use.

For example You want to use Open Sans font family for your site. In that case you have to click icon according to the following image:

googlefonts-step-1

Step 3:

Then you will see 4 part. In the first part you have to select various font-weight that you want to use.  You will see something similar to the screenshot given below:

googlefonts-step2

After selecting your preferences you can also select some preferences from part 2. You can skip the part without selecting anything.

In the third part you will see the following html code:

googlefonts-step3

Copy the code and paste into your html file inside the <head> tag like below:

googlefonts-step4

Then go to the part 4 where you will see the following css code:

googlefonts-step-6

 

Copy the code and paste into the css class where you want to use. For example, you want to use for whole site then put the code into the body tag like below:

google-fonts-step-5

That’s all!

Please don’t hesitate to ask question if you don’t understand in any point or face problem to implement.

You may also like