SEO Friendly Fonts: Google’s New Font API
Quite a few of us at 6S Marketing have a background in some aspect of web development, so when we come across something techy that benefits both SEO and webdev, we never shy away from the chance to geek-out a bit. Dealing with image-headers is one such case.
Style vs SEO-Friendly Semantics
Until very recently most web browsers only supported a handful of standardized fonts. If a web developer needed to use a unique font within a page, they were often forced to resorted to work-arounds such as embedding the font within an image file. This practice, most commonly associated with image headers, can be optimized with proper use of alt attributes and image file names, however we find that these two simple optimizations are often ignored. This presents a problem as search engines have historically had difficulty identifying the focus of image content when not accompanied by other optimization signals.
Google’s New Font API
Yesterday, Google unveiled its new SEO friendly font API. The API is supported by the four major browsers (Safari, FireFox, Chrome, and IE6 and above), and allows many new fonts to be displayed within web pages in a manner that relies on plain text instead of images. This is great for SEO and could potentially replace the common practice of using image-headers instead of text marked up with CSS and heading tags. All an SEO or developer has to do is insert a snippet of code within their page’s HTML and make a minor adjustment to a page’s CSS. It’s incredibly easy!
Here’s an example of the new Google API at work (NOTE: the code and result sections below are just implementation examples; not an actual functioning demonstration.)
Code:
<html>
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {font-family: 'Tangerine', serif; font-size: 48px;}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
Result:
(and search friendly)
Have a question or opinion on this subject? Don’t be shy, leave me a comment in the comments section below – I respond to all of them!
For more information on our SEO Services please visit the 6S Marketing search engine optimization page.
3 Comments
Comment by Kerry — May 21, 2010 @ 5:05 am
Lets call this a start. With only 18 fonts in the collection and some very poor rendering cross-platform, this isn’t a cure all quite yet.
Typekit will get you a much larger range of options if required and is priced quite effectively. But better still, is the nearly unlimited design choice that comes with still using images or sIfR and then also including the text inside the html…Image replacement anyone?
Also, why use a Png to display a new font embedding technique?
Comment by Jonathan Becker — May 21, 2010 @ 8:25 am
Hi Kerry,
You’re quite right, it’s no final solution, but a step in the right direction nonetheless. Just because Google comes out with a free solution, doesn’t mean that there aren’t going to be other one’s that won’t work well around this issue. I do imagine that with time the Google API will support better cross platform rendering. Like I said, it’s a great start ..
The example we used in the article was simply a quick illustration of an implementation of Google’s new API. As I mention in the post, it wasn’t meant to be a live, working example. I do see the irony in this however. Thanks for the feedback.
Comment by Henry Gilbert — May 25, 2010 @ 2:10 am
Font Tangerine is 89kb in size. That is quite big. I try to cap the size of my pages to 50kb max.
I was stuck with a font problem once. And couldn’t use a image because SEO was necessary. Not the best solution for today I guess – but at the time I thought of just extracting a subset of letters and adding that to a Flash movie.
Then blend it back. Result 2.2kb
Not the best solution for today, because I’ve heard Flash doesn’t work on the iPhone; and if so then the Title wouldn’t render. Need to check that.
RSS feed for comments on this post. TrackBack URL