In a Hurry? Click Here to Download the PDF Version
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;
}
Thanks for the article. It appears the code references the fonts on Google. What happens if Google is down or they decide to stop maintaining the fonts? If my site can’t reach the Google page for any reason, wouldn’t my site be messed up? Anyway to download the fonts to my site and change the reference?
Jeff, if google were down, I assume it would just default to whatever the backup font is specified (which is probably happening anyway in older browsers). You can download the fonts directly, but I don’t know how to pull of what you are talking about – if you find out let us know!
Thanks for the tip Bob. I just added a font to a site of mine. Took about 15 – 20 minutes to get everything squared away, but not bad at all considering the good change a nice font brings to a site.
Great Tim, I will have to check it out…
Also check out http://fonts.webtoolhub.com/ for downloading thousands of Free Fonts for Windows and Mac OS in native form.
Hi there, will downloading the fonts work for Blogger too?
Star I am not sure how fonts are added on Blogger, so I don’t know…
I found your article was so great and should be helpful for me to blog in my own language. I speak Khmer so I want to blog Khmer language for my blog but i don’t know how to add it and after I follow your tips, i read down khmer language into my blog post but it appeared just ?????…I don’t how to resolve it…could you give me a clue?