[Full Guide] How to use Google Font in your project

how to use google fonts

There are many fonts websites in the market but in this tutorial, we are going to learn how to use google fonts in our project file.

Fonts are important for the content of websites. They offer an incredible user experience. There are many font sites on the Internet, but Google Font is one of the best websites on the Internet. It is especially good for beginners who have started their career in web designing or web development.

About Google Font?
Google font is an official website of Google. It was launched in 2010 as a Google Web Fonts, Google font is a website which provides web fonts to there users. It has a collection of 952 Web fonts.
Google font is an open-source that anyone can use commercially or personally in their projects. All fonts are completely free.

Who can use google fonts?
Anyone can use google fonts in their projects. There is no restriction for anyone. If you are web designers, Graphic designers, UX designers, developers, students, bloggers, social media managers anyone can use google fonts in the projects.

What are the fonts?
Basically, font means that if we add content to our website and need to stylize our content, these fonts will help us to style the content of our web page.

Why we are using fonts?
We are using fonts to give a good user experience to our website content.

How to Use Google Fonts in HTML files?

Step 01:
Open your Chrome browser or any other browser that you have installed on your computer and search for "Google Fonts" and then click on "https://fonts.google.com”.

How to Use Google Fonts in HTML-step01
Step 01

After opening the Google Fonts website, you will see the different fonts on the screen. Let's understand the interface of the site.

In the upper right corner you can see the navigation menu with different pages of CATALOG, FEATURED, ARTICLES, ABOUT

CATALOG(1): In the catalog page, you will get a different font to embed on your web page.
FEATURED(2): On the selected page you will see some featured fonts.
ARTICLES(3): In the articles page, you get articles to read.
ABOUT(4): In the About page, you can learn more about Google Font.

Below the navigation bar, you will find a search bar for searching for fonts with names and you can scroll down to see the different more fonts.

How to use Google Font in your project-website Interface
Google Font website Interface

Step 02:
Click the search bar and look for the font name you want to add to your file.

How to use Google Font in your project-step2
Searching Font

Step 03:
After searching for your Font. You will get your font, then click on the "+" plus icon. After clicking on the icon, you get a selection drawer from the bottom, then click on this selection drawer.

How to use Google Font in your project-step 3
Selecting Google Font

Step 04:
After clicking on the selection drawer will see
  1. Font Name
  2. Embed and Customize
  3. Two options Standard and @Import 
  4. Link tag for html
  5. Font-Family Name

How to use Google Font in your project-step 4
Introducing the selection Drawer

If you want to use more then one font then click on the selection drawer it will move down the search for other fonts then repeat the Step3 process and continue.

How to use Google Font in your project-adding more google fonts
Adding More Google Fonts

Step 05:
To customize your font style, click Customize and check the boxes for the weight of the font you want.

How to use Google Font in your project-step 5
Checking boxes

Step 06:
After that, To embed Font in HTML copy Link Tag and past in HTML head tag section.

How to use Google Font in your project-HTML
Adding Font in Our HTML

How to Use Google Fonts in CSS files?

In css, till step 04 it's the same process after step 4 click on @import that copy first link and past in css file.

How to use Google Font in your project-css
Adding Font in Our CSS

With this, you have learned how to use google font in html and css file.

Post a Comment

Post a Comment (0)

Previous Post Next Post