How To : Use Google Fonts On Your Website

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

google-fonts-library-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.

add-to-collection

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.

Use-font

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.

choose-styles

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.

Subscribe to RSS feed to get notified whenever new article is published on TechArrest.com via Email.
Enter your email address:

Delivered by FeedBurner

Founder and Editor in Chief of TechArrest.com. Loves to write on topics like Tech How To's, Wordpress, Android, Website Creation. Currently pursuing his B.E. from World Institute of Technology, Gurgaon (India). You can catch him on Facebook and Twitter

If you like the articles on TechArrest.com, you will want to subscribe to our RSS Feed so that you are updated as soon as any new article is published. If you would like to write for us then please contact us using contact form

11 Responses to How To : Use Google Fonts On Your Website

  1. KBharath says:

    Thanks for sharing this clean tutorial and as i am a wordpress user i am using a plugin for getting google fonts on my blog.

    • Aman Arora says:

      Yeah you can do the same using wordpress plugin but I don’t really like to do every task using plugins because they kinda slow down the loading speed of the blog :)

  2. Chirag says:

    Nice one! Thanks for sharing!

  3. [...] Also Visit : How To : Use Google Fonts On Your Website [...]

  4. vikram says:

    Thank U For Useful Article..Will Setup Soon ..

  5. Abhishek says:

    really nice information man.thanks.

  6. Shitij says:

    I tried the link that you posted but it does affect the loading speed of our blog….I guess one does not experiment with the font and follow some other branding methods…anyways thanks for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge