menu
Ad goes here

Saturday, 6 October 2012

How to use awesome fonts from Google Web Fonts API?

Everyone has a hidden creativity and few are express their creativity through pen or pencil and few are with their visibility and preferences. So let's a customer don't want the system fonts (Arial, Verdana, Times New Roman, Georgia etc) and asking for little different font to make his/her website little different by typography.

Don't worry about the requirement and even don't need to convince them to use images or any other options other than Google Web Fonts API. The Google Web Fonts is really beautiful, readable, accessible and open source. Just choose the suitable one and apply on the website, hope your customer will be happy.




How to implement:

  1. Please access the URL http://www.google.com/webfonts, you will get more than 500 fonts and their style. Choose the suitable one by click on Add to Collection button. If you need more than one font then the facility also is available.
  2. A collection block will be appeared at the bottom of the page with the chosen font. You can also view the font style in the same page before applying on your own page to click on Review button. If you satisfy with the looks of the font then you can process to use them or not, then you can also remove it from the collection and choose another suitable one.
  3. Suppose you have chosen a web font called "Carrois Gothic" and decided to use. Please click on the "Use" button. You will redirect to another page. Please scroll the page to the bottom area; you will get an area where clearly mentioned that "3. Add this code to your website" with three options i) Standard, ii) @import and iii) Javascript. I personally preferred Standard -
        <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic'
        rel='stylesheet'
        type='text/css'>
        
    Please place the above code in your webpage before the </head>
  4. Add the font name to your CSS style you'd do normally with other fonts like the example below.
    h1 { font-family: 'Carrois Gothic', Arial, serif; font-weight: 400; }
      


If you enjoyed this post and wish to be informed whenever a new post is published, then please subscribe now.

No comments:

Post a Comment

Books for you (Crafted with )