Google Web Fonts – Using Non System Fonts in Web Pages

Tips/Tricks Comments Off on Google Web Fonts – Using Non System Fonts in Web Pages

Now a days use of Non System fonts is crazily moving forward and widely using by the web developers and designers and the whole credit for the same goes to Google Web fonts. Where Google Web fonts is totally a 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 using Google Web Fonts

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-quick-use

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-quick-use2

If you like you can combine and use 2 or more fonts with pipe “|” sign

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji|Headland One" media="screen">

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-quick-use3

Author

Back to Top