250 Free Fonts From Google?

Did you know that rather than using the typical (and boring) 8 or so safe webfonts out there, that you can easily install hundreds of free fonts from Google that you can use on your website?

I decided doing a quick video tutorial would be better than taking 20 screenshots.

If you cannot see the video above, please watch “How to Install Free Fonts From Google” directly on YouTube.

Be aware that the tutorial explains the process for the Thesis WordPress Theme which is the theme we use and recommend.

How do I get started?

To get started installing the Google free fonts you can go to http://google.com/webfonts.

CSS Mentioned in the Video

This is the CSS that we use on this site for our headings. You will need to swap out the text that says “YOUR FONT NAME HERE” with whatever fonts you installed from Google. Also, I recommend playing around with the sizes, spacing, etc to get the look you are trying to achieve.

/* _________________________________ CUSTOM Fonts */

.custom h1
{
font-family: ‘YOUR FONT NAME HERE’, serif;
font-size: 35px;
color: #1D2D40;
text-transform: capitalize;
word-spacing: 0.051em;
line-height: 1.11;
}

.sidebar h3
{
font-family: ‘YOUR FONT NAME HERE’, Georgia, serif;
font-size: 24px;
background:#1D2D40;
padding: 10px 10px 10px 20px;
}

.custom h2
{
font-size: 1.9em;
font-family: ‘YOUR FONT NAME HERE’, Georgia, serif;
}

.custom h3
{
font-size: 1.2em;
font-family: ‘YOUR FONT NAME HERE’, Georgia, serif;
}

If you want to change the font for your body text, you will want to do something link this…

.custom p
{
font-size: 12px;
font-family: ‘YOUR FONT NAME HERE’, Georgia, serif;
}

Have you used any of Google’s free fonts on your site?