Hundreds of free fonts for your website

Want to change up the boring Arial body text or have stylish headers without making them images? Google Web Font is the site you are looking for. They have more than 500 FREE fonts to choose from to drag your website out of web safe font monotony.

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them.

So how does it work?

Simple:

Go to http://www.google.com/webfonts and find a font you like. For this example I will use Patrick Hand SC.

Click on the quick-use button.

[fancy_images width=”600″ height=”370″]

[/fancy_images]

On the quick-uses page scroll down to the third section, “Add this code to your website”.

[fancy_images width=”600″ height=”370″]

[/fancy_images]

There are a few ways to add these to your website. I will walk you through two ways.

Option 1: Add them in the External Stylesheet

WordPress users you can find your stylesheet under Appearance ->Editor.

You will need to add a line of code that tells computers to grab the font from Google.

@import url(http://fonts.googleapis.com/css?family=Patrick+Hand+SC);

Now that you have added that line of code, you can use the font like any other font.

h1{
color:#6D6E71;
font: normal 26px "Patrick Hand SC", "Lucida Grande",
"Trebuchet MS", Verdana, Helvetica, sans-serif;
}

 

Option 2 : Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

<link href=’http://fonts.googleapis.com/css?family=Patrick+Hand+SC’ rel=’stylesheet’ type=’text/css’>

<style>
h1{

color:#6D6E71; font: normal 26px “Patrick Hand SC”, “Lucida Grande”, “Trebuchet MS”, Verdana, Helvetica, sans-serif;

}
</style>
</head>

Give it a try, and let me know what you think. Easy, right?

 

Share
This