Customize Font on the Web using Free Google Webfonts

One of the things that you may be looking to do is add a particular style font face to your website to complete the look and feel you are designing for. If none of the fonts that are preloaded into the browser seem to complete the look, there is a very simple API that has been developed by Google that allows you to choose from hundreds of different fonts to use in your website.

There are other sources that have similar API’s but Google will most likely stay around for the duration that you are using their hosted files while I cannot say the same about any other company as easily.

In order to include a font from Google’s web font library, go to http://www.google.com/fonts. Choose a font that you want to use and click the Quick-Use button in the bottom right hand corner of the chosen fonts section on the page. Scroll to the bottom of the page and copy the

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500' rel='stylesheet' type='text/css' />

and paste it into the head of your document between your <head> </head> tags.

This tells your browser to load that font from the Google web fonts library. Now you just need to tell the browser where to use the font in your page. We do this in our CSS file. We can put it in our body tag, p tag, h1 tag, etc.

body {
    font-family:'Orbitron', sans-serif;
    font-weight: 400;
}

You can copy and paste this code directly from the font’s page on the Google API website as well.

This will allow you to complete the feel of your website with custom typography.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s