Adding custom fonts to your website can be a bit of a pain if you  don’t know what you are doing or you are an absolute beginner at CSS and  HTML.

Well, This article is perfect for you if you want to learn how to use  Google’s hosted fonts using their API. Just for FYI, Its a piece of  cake to use it in your project… And yes it is free.

1. Pick the fonts that suit your taste

In order to use Google’s Font API, You’ll first have to choose fonts that you want to use in your site.
Go to this link.

Google Fonts Selection

2. Choose the method you want to use in order to apply selected fonts

You have 2 options to use the fonts you selected in the previous step.

  1. Using the link tag on top of your page.
  2. Using @import in the stylesheet.

There is nothing wrong with any of the given methods. It’s just a matter of convenience. If you go with link, You are leaving most of the things to the Google and fonts will work fine as long as that link tag (I’ll show you in a moment) is in the head of the page. And if you go with @import, You’ll have two options to put it in the <head> tag or you can import it in your CSS using @import.

Let’s see how to do it using both methods.

Google Fonts Selection CSS Standard


Copy link tag as shown in the above image to the head tag of your page. It will dynamically load the fonts to your page.

Using @import in stylesheet

Google Fonts Selection CSS import


Here  is a thing, you can copy the code shown above in the image to the head  of your page and it will work just fine. But you can also put it in your  stylesheet using @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed'); without <style> tag. Just for FYI, I like using it in stylesheet using import.

That’s it! Thanks for reading. :)