Do you want to use different font styles in your webpage?

Are you having a problem remembering the font style names?

 Do you want to use fonts like dafont on your webpage without even downloading it?

Don't worry, Google font is there to solve all these problems.
Google provides you 900+ font families who are free to use.

Google font is so handly and easy to use. Almost all web developers use Google fonts to try a variety of font styles. The database contains the coolest fonts you will ever see.

[FREE] Download/Use Google Fonts locally


Now let's see how to use Google Fonts.

Step 1 Navigate to the Google Font website.

Step 2 Choose the Font style which you like and then click the add button.


Step 3 You will have two options (EMBED / CUSTOMIZE)




      
                       



In the CUSTOMIZE section, you will be able to customize the font family-style, and in the EMBED section, you will get the two methods of embedding the font family.

Hey, you might be thinking that why I choose google fonts Roboto as my example, you know why because it is the most searched font on the internet. Ok, let's get back to the steps.

Those methods are followed as:-

Either to add a link tag to the head of the HTML file (STANDARD).

<link href="https://fonts.googleapis.com/css?family=Font+Name "rel="stylesheet"></link>

E.g.:- 

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"></link>

Copy and paste this link tag in the head of the HTML file.

Or you can import the URL on the CSS file (@IMPORT).

@import url('https://fonts.googleapis.com/css?family=Font+Name');

E.g.:-

 @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

Import the URL by copy and paste the given code to the CSS file.

Step 4 Now, you can use the font-family anywhere you want on your webpage, just only using the font family name.

.css-selector{
   font-family: 'Font Name,serif';
}

E.g.:-

font-family: 'Roboto Condensed', sans-serif;
You need to copy and paste the given code above in the CSS file.

And your font style will be changed as per your choice.

You might be thinking that can I use it for Logo? Obviously, Yes, you can use google fonts for the Logo. Have a look at this Google font effects.

Google also provides you with a variety of icons that you can implement on your webpages through the Google Font Awesome tool. To know more about it, you can refer my blog on Font Awesome too. It has in-depth steps on how to implement the icons which are present in there, and hey it all free fonts in there on Font Awesome.