The Future of SEO: Inline SVG Fonts

Posted on Wednesday, May 12th, 2010 by Print This Post Print This Post

Categories - Featured, SEO

Marketers and SEO gurus alike strive to design dynamic websites, while keeping their SEO strategy in check and attractive for Google and other search engines. One of our key problems in this process is incorporating ‘fancy fonts’ while avoiding SEO value for ‘hiding text.’**

To avoid this problem, there are a set of new SVG/Flash techniques that render fonts as images. There are currently several systems available for this, but the two major ones are sIFR and CuFon. Both translate the ‘real text’ into Flash or SVG commands, [SVG is a graphic format based on text commands- it’s very fast], which is then executed by the browsers.

The benefit of these systems is that search engines still find plain text, but the output in the browser can be completely different, creating different fonts or font effects, because the HTML is rewritten dynamically using JavaScript. There is no CSS required, which helps to maintain a good page rank and make your site more attractive to visitors.

** What is hidden text?

[This question may seem obvious for experienced SEO programmers, but let’s take a moment to cover the basics.]

Hidden text is textual content that is readable by search engines, but is invisible to your visitors. It’s commonly been used for ‘Black Hat’ SEO practices, in which developers jam their websites full of keywords that improve a site’s page rank. Google and its compatriots have caught on to this scheme and have developed scam parameters that denote the site as a sham. As Google warns, “Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors.”

sIFR (Scalable Inman Flash Replacement)

sIFR uses a combination of Flash and JavaScript to replaces passages of ‘plain browser text’ with a text that is rendered in your font of choice. A major plus is sIFR is that it can deliver fonts even if you or your users do not have that particular font installed on your computer. sIRF also enables you to easily add shadows to your fonts, as well as, other Flash text effects. sIRF is also very popular, because it does not violate any EULA or copyright rules.

Cons:

  • It often causes slower loading times and requires that both JavaScript and Flash are enabled.

Example Sites:

CuFon

CuFon is another system that renders fonts using JavaScript. It uses a font generator to convert fonts to a proprietary format. This generator creates a custom FontForge script and saves the results as a SVG font.

Here’s a diagram that breaks this process down:

Pros:

  • Faster loading times than sIRF
  • No plug-ins required
  • It works on all major browsers
  • Easy to use

Cons:

  • Been noted to claim copyright rules- because fonts are being embedded
    • Not every font can be rendered with this method
    • Text cannot be selected

Example Sites:

I personally like CuFon because it works without Flash and I have been using It on my websites without any impact. While neither of these methods is completely perfect, they do help developers, designers and those of us concerned with Page Rank find a better balance between engaging design and searchable content.

To learn more about these systems and to start implementing them into your website design, check out the following links:

sIFR

http://wiki.novemberborn.net/sifr/

http://www.3roadsmedia.com/blog/how-to-install-and-configure-sifr/

CuFon

http://wiki.github.com/sorccu/cufon/usage

Tags | , , , ,

3 Responses to “The Future of SEO: Inline SVG Fonts”

  1. Nick says:

    I used cufon on my new website, looks great and there hasn’t been any issues with Google.

  2. I like how you catch the substance of the message, truly great writting layout, I enojoyed it!

  3. Thanks You very Mutch !!!! I Really Enjoied .

Trackbacks/Pingbacks


Leave a Reply

Follow Us on Twitter

Authors