A to Z on how to use google fonts on your website

How to embed google font to your website
How to embed google font to your website

Adding google font to your website is very easy and simple. Follow the following procedures below to add google fonts to your website.

Find Your Preferred Google Font:

Yes, the first thing you need to do is to find your preferred google font i.e (finding the google font you would like to use on your website) and to do this, go directly to the Google font website (See Image below)

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Select The Google Font:

Looking at the image above, you will see several fonts with their respective text examples, let’s say we want to use the font “Roboto” for our website. The next step to take is to select the font by left-clicking on the plus (+) sign in red beside it (See the image above).

A minimized dialog box  with title “1 Family selected” will appear directly above your system task bar, left-click on the minus (-) sign to maximize the dialog (see image below).

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

After maximizing the dialog box, all its details will be revealed, then under “EMBED” you will see two other options the STANDARD and @IMPORT, the links you see directly under this when any of them is selected are what we are going to use for this tutorial.

Embed the link into your website page:

In the dialog box, you will see that there are two methods of adding google fonts to your website and they are;

The Standard Method:

For me, this is the best method of adding Google fonts to your website, this is done by simply taking the font URL or font link that you got from google font website (see image below).

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Copy and paste the code in-between your web-page head tags <head>Place the font link Here</head>.

To copy, first highlight the text link by placing your cursor at the beginning of the link, left-click and hold, then drag it to the end of the link.

On your keyboard press “Ctrl + C” to copy the font link and after copying the link, use “Ctrl + V” to paste it in-between your web-page head tag (see image below).

As you can see in the image below, the opening and closing tag in red block while the font link is in-between them.

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

The Import Method:

This is the second method of adding google font into a web-page. It requires copying the second link that appears when you click the @IMPORT in the dialog box (see image below).

You either paste this link in a stylesheet in-between the head tags or directly in a separate CSS .

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Note: After pasting the font link, nothing will happen (i.e you wont see the google font) until you implement/specify the web font in the stylesheet

Specify the Google fonts in CSS (Cascading Style Sheet):

Specifying the google font in CSS is just like telling your stylesheet to use the font (Roboto) for the web page, to tell the stylesheet which font to use and this can be done in two ways (see image below).

For internal stylesheet; Copy the CSS rule in the dialog box and paste it as shown below i.e the one in red while the one in yellow was the font link you previously pasted in-between the head tag.

A to Z on how to use google fonts on your website

For External Stylesheet;

A to Z on how to use google fonts on your website
A to Z on how to use google fonts on your website

Now see the difference between the two web-pages, the first image is when the google font-family(Roboto, sans-serif) has not yet been applied and the second image is when it has been applied.

 

 

 

 

 

 

Please do not hesitate to share your own idea through the comment box, also feel free to comment.

like our facebook page @ http://www.facebook.com/ceeceecomputers