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.
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.
- Using the
linktag on top of your page.
@importin 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
Let’s see how to do it using both methods.
link tag on top of your page
link tag as shown in the above image to the
head tag of your page. It will dynamically load the fonts to your page.
@import in stylesheet
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
That’s it! Thanks for reading. :)