Using Custom Fonts on Websites

As a graphic designer AND web designer one thing that I often find frustrating is making a site look really cool and making sure it’s as SEO (Search Engine Optimization) friendly as possible. One of the biggest ways that I’ve felt constrained often is by what fonts that I can use.  I mean, sure, I could use whatever font I want really and I’m sure it would look good to my eyes, but what if a potential customer of one of my clients goes to their site and they don’t have that same really cool font on their computer?  Then the font gets substituted and likely does not look as cool and perhaps some alignment may also be off.  So a no-go generally for cool fonts.

So what does a web designer do then?  Well generally you’d either choose a font that you know is common (thus limiting the selection that you have – there’s a reason so many websites use arial for a font!) or you put the text in an image.  Of course if you put the text in an image then Search Engine Spiders can’t read the text and thus it’s not SEO friendly – nevermind accessibility for those with different disabilities!  Well Google has come to the rescue again with yet another cool product – Google Web Fonts.

Google Web Fonts lets you choose from over 430 fonts, and I’m sure that number will continue to climb, and you can use any of them on your website with one line of code in your CSS and one in your HTML.  You just have to follow 3 simple steps from their website:

1. Choose: Search or browse hundreds of font families, then add the ones you like to your Collection.

2. Review: Compare and refine your Collection, even see the styles in a dynamic sample layout.

3. Use: Grab the code Google prepares and you’re ready to add the Collection to your website!

How simple is that? I have one word for it, AWESOME!  Now I don’t have to be constrained to certain fonts in my web design projects – thanks again Google!  What will they think of next?

Tags: , , ,

This entry was posted by Anna Kouwenberg on Tuesday, February 7th, 2012 at 2:55 pm and is filed under Branding, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.