How to use a google font on your website with example

How to use a google font on your website with example

For a better web designing every web designer as well as every programmer either beginners or experienced programmer want to create a unique webpage for the website.

But few mistakes can generate a big issue for the end user as looking perspective or reading perspective.

So that when we talk about the Fonts then designer and programmers think how to use an external font into a website or how to use a google font on your website.

Google Fonts are very clear, neet & clean and also better for the SEO (Search Engine Optimization) font. Google fonts help to improve your website rank as SEO point of view.

 So everyone tries to use the better font on their website when they develop their website and google provide us tremendous font which can be applied to the site.

Loading...

Now, we discuss about the Google Fonts, and learn how to use a google font on your website. Importing Google Font in your website is very easy process, simply follow these few steps:

Step 1:

First, of all, you have to choose the appropriate, good looking and a suitable font for your webpage on the Google Fonts website. So visit this link https://fonts.google.com/. You'll see this page on your screen:

google-fonts

 

Step 2:

There are two ways to use your selected font in your website first STANDARD and second @IMPORT method. Both are easy to use. 

google-fonts-droid-sans

Loading...

Suppose, I have chosen the font name Droid Sans then STANDARD code will be like this:

In your Head tag:

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Droid+SANS" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

In your CSS, Use the following CSS rules to specify these families:

font-family: 'Droid Sans', monospace;

Suppose, I have chosen the font name Droid Sans then @IMPORT code will be like this:

<style>
@import url('https://fonts.googleapis.com/css?family=Droid+Sans');
</style>

In your CSS, Use the following CSS rules to specify these families:

Loading...
font-family: 'Droid Sans', monospace;

And DONE!.

Read this also:

Related posts

(1) Comments

  • User Pic

    Awesome font for web on the google fonts.....

Write a comment