Few months back I was simply browsing as everyday and I encountered a blog using some really awesome fonts, I was like how is he using this font and how am I able to see it because that font wasn’t present on my system. Question in my mind was how is my browser rendering that font even without me having it on my system.

Now out of my curiosity I searched google and found that it was google web fonts, I was really new to web typography and we fonts at that time but google has a very good fonts api using which you can easily apply web fonts on your blog or website. Their font library consits of a lot of cool and free web fonts.

You can visit Google Fonts Library at : http://www.google.com/webfonts

Step 1 – Filter The Fonts

From the above list you can choose any font present in the library to use it on you blog/website. At the time of this reading it has 404 font families. You can filter these fonts using filters such as thickness, slant, width, sans-serif and many more which are present in the sidebar

Step 2 – Short List The Fonts

You can use more than one google fonts on your website very easily. So, whenever you encounter a font that you like you can add it to your collection, from there you can shortlist your font or fonts later.

When you add a font to you collection a blue box will popup from the button listing your fonts, as you keep adding fonts in the collection they will appear here. After you have choosen you font click on use.

Step 3 – Review Fonts

From here you can review all of your choosen google fonts. Uncheck the fonts that you don’t want to use using the checkboxes present besides the web font name. You should choose only the fonts that you are using, because more the web fonts slower the loading speed of your page.

Step 4 – Import Font CSS

Now we need to import these fonts in our page using google fonts api so that we can use the fonts in our css files. Google has provided three methods for importing fonts in the broswer. These are

• Standard
• @import
• Javascript

I mostly like to use @import method through which you import the fonts css directly in your main css file but for this tutorial lets just use the standard method which is linking the fonts stylesheet directly into the website.

Just scroll down a bit you will see the code which you need to paste in the head section of you html document to link the css. Code looks like this

link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'


Step 5 – Use The Font

Now we can use the names of these fonts in our css file as if it is a normal font family. CSS code will something like this.

font-family: 'Chelsea Market', cursive;


You should have successfully added web fonts to your website/blog by now. If you are having some problems then do let us know in the comments section. Also please post you favourite google fonts so that others can have a hint.