Google web fonts – using non-system fonts in web pages


Nowadays the use of Non-System fonts is crazily moving forward and widely used by the web developers and designers and the whole credit for the same goes to Google Web Fonts. Where Google Web fonts is totally free service and an amazing free resource for web designers.

There was a time when web designers and developers were forced and restricted to use system fonts that were commonly found in most of the machines. But now the scenario has totally been changed and the use of Non-System fonts is drastically increasing.


Adding Non System fonts is quite easy, as you just have to follow very few steps mentioned below

  1. Select a font of your choice from Google fonts library
  2. Click to “Quick Use” link as shown below

Google Web font step 2

Scroll down the Google font page to step 3, where you will find 3 ways to add Google fonts – Standard, import and JavaScript. Whereas I prefer the “Standard” one so adding <link> tag in <head> section.

Google Web font step 3

  1. If you like you can combine and use 2 or more fonts with pipe “|” sign
    <link rel="stylesheet" type="text/css" href="|Headland One" media="screen">
  2. Finally it’s time to integrate the linked font in CSS. So for that scroll a bit more in Google Font page and copy the given CSS rule to your website style sheet.

    Google Web font step 4

Enjoy the Non System using Google Web Fonts.


Please enter your comment!
Please enter your name here