How to use the Google Web Fonts API

What is Web Fonts?

Web font refers to method that allows the automatic downloading and temporary installation of Fonts within client.

Today Web designers have more choices to use various fonts on web.

Web fonts are now integral part of web design process.

Google Web Font API is one of the options to provide high quality web fonts that can be included in web page.

Google Web fonts is free, open source and feature several high quality fonts.

You will find huge number font at url http://www.google.com/webfonts. Also this list is growing very rapidly. This is catalog of available fonts. These fonts can be used on any non-commercial and commercial project.

How can we use Google font API to serve font to web pages?

Steps for Quick Use


Advanced font selection

Visit Google Web fonts –

Go to url – http://google.com/webfonts

Browsing and filtering fonts –

We can browse the fonts and we can add them in collection. Then we can see how they look together.

You will notice that without any filtering there are more than 500 fonts. This number is growing all the time as more and more fonts are added to directory.

You can use filters on left to narrow down Font list. You can Filter ‘Categories’ (like Serif, Sans-Serif, Display, ‘Handwriting’), ‘Thickness’, ‘Slant’, ‘Width’, ‘Script’

Tips on typography –

Fonts are broadly classified as Serif and Sans-Serif.

Serif font s are fonts with flourishes or ‘tails and flags’. They are more decorative to some extent.

Sans-Serif fonts are without flourishes or ‘tails and flags’. They are not decorative particularly. (word ‘sans’ means ‘without’ in French)

Web Font API:


Select Serif font:

Filter font list by categories. And select ‘Serif’ from drodown.

You will notice that, Google Web font will show only Serif fonts and rest of the font is not visible.



Select Sans-Serif Fonts:

Select Sans-Serif font similar to above step. And add it to collection.

Review Collection:


After you have chosen font, view them together under ‘Review’.

This section include following Tabs –

Specimen – This screen shows fonts (with paragraph) from collection.

Styles – This will show how many styles an individual font has. For example, Google web font Karla has font styles like normal, normal italic, Bold, Bold italic. This can assist in choosing font with specific style.

Test Drive

Test drive will let you test font directly with CSS rules.

Click on any paragraph on Test Drive screen.

We can test font by applying:

-         font -family

-         style

-         size

-         transform

-         Decoration

-          letter spacing (can be manage using slider)

-         word spacing (can be manage using slider)

-         line height (can be manage using slider)

As you apply css by using CSS rule generator, relevant css rule will be visible in CSS box. You may want to copy and paste these CSS rules text file for later use in HTML Code.

Character set

This will show all special characters that font supports. You may avoid using font if that does not include special character that you require for web page.

Description

Description about font.

Use Font:

Click on ‘Use’ button from Collection bar at the bottom.

On next screen, you may want to check or uncheck styles to include or exclude them respectively. Remember, additional style is always a burden on Page Load.  So only include those styles which are required on web page.

If you scroll down on above page, there are 3 ways to grab code which is required to be added in web page.

1.     HTML – This has to be inserted in html under <header> tag.

2.   Import – This has to included in default CSS of of website. This code has to be on top of default CSS.

3.   JavaScript – Copy and Paste code in <head> tag of HTML.

After code is copied using one of the above 3 ways, last step is to integrate fonts in your website’s default CSS.

View you fonts

Before:


After:


HTML Code:


This entry was posted in Web Application Development and tagged , . Bookmark the permalink.

Comments are closed.