Search code examples
htmlfontsimagefont-face

Custom H1 Text - image replacement? @font-face?

Ok, people, I'm sick of arial.

The word these days is that @font-face is the way to go for all things, but, well, as best I can tell the support isn't really there yet (am I wrong? people still use FF2, right? no?)

I'm a reasonable fan of just rendering the headlines on the server using GDlib, but that obviously does not create searchable headlines.

I am considering using plain old < h1> & < h2>s, then parsing through the page in javascript and replacing it with the images, but I am still concerned that this'll piss off the googles.

In the ultimate uber-hack, I though maybe I could use @font-face, and then, if it's not supported, render the text as an image. I'm still concerned that this'll anger the googles though. (this leads to a secondary question - is there any way to detect support of a particular css feature without simply detecting the browser and comparing to a compatibility list?)

Any thoughts? Am I just wrong in thinking that @font-face isn't ready for prime time? WWSOD?

Thanks!

Solution

  • If you render the header as a background image (with CSS) this is quite safe from a seo point-of-view, the text is still there just hidden.

    .header
{
    background: url(header.png) 0 0 no-repeat;
    text-indent: -999em;
    height: 30px;
    width: 100px;
}

    I agree on the chuck of browsers still out there missing @font-face support. Google lists the supporting browsers as:

    * Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Opera: version 10.5+
* Microsoft Internet Explorer: version 6+