Cross-platform fonts - embedded?

I am working with a client on using a font that is available on Windows by default, but not *nix OSs such as Mac, Fedora, etc. The problem is that the client wants this font to be used for all headings. I have looked into embedding the font into CSS, but from what I read, it was supported back on the IE 4 and Netscape 4 days, but not so much any more. I even tried it out myself on IE8 with no luck.

The next option would be to make it an image. That would be perfect except for SEO purposes, I am actually removing the image text that already exists to make it content that search engines can pick up.

So, I'm stuck here. I have tried using more global system fonts, but even then, they very so much between the systems. For instance, the font size for Windows may be perfect at 18px, but when I view it was 18px on Linux, it may be smaller or larger depending on the browser and OS configuration.

Can anyone offer advise of making this possible? Flash is one thing I need to avoid.

 

CSS3 introduces ANOTHER way of doing it, but frankly I don't consider a specification not even out of DRAFT deployable real-world.

My advice is go ahead and use the image - BUT, use a image replacement technique on your headings like Gilder-levin or similar.

<h2>Some text<span></span></h2>

In the css set the h2 to position:relative, make sure it's scaled the same size as the image, then absolute position the span over the text making your image it's background.

h2 {
	position:relative;
	zoom:1; /* trip haslayout without breaking IE 5.x due to padding */
	padding:6px 12px;
	font:bold 18px/20px arial,helvetica,sans-serif;
}

h2 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:32px;
	background:url(images/h2.png) 0 0 no-repeat;
}

Code (markup):

The text will be on the page, but hidden behind the image giving screen readers and search engines something meaningful for content. It also is NOT treated as cloaking by the search engines since the image says the same thing as the text it's hiding... and it also means if the user disables images (like when on a metered connection plan) the site 'gracefully degrades' to provide them with meaningful appearance.

You can even put all your heading images into a single file, and slide the background around to show the different headings. That usually results in smaller total filesize due to how encoders work, and certainly loads faster being less requests to the server.

The only drawbacks to using this approach is the image does not scale to the user preferences/system metric, you need to create a new image every time someone wants a new header, etc, etc.

Though honestly, I'd tell the client that what they are asking is unrealistic and not a good idea from an accessibility or cost standpoint. Pixel perfect 100% cross-browser cross-platform isn't even what HTML is for - in fact, it's completely missing the point! The point being the user agent determining the best way to present information to the user. (something your photoshop nimrod 'designers' constantly lose sight of - another reason starting out drawing a pretty picture in photoshop before making a single line of markup is putting the cart before the horse)

 

@deathshadow,

Thanks for the response. One idea I had thought about in the past was using a span to hide the text, but I wasn't sure how to do it nor could I explain it will enough to the client to sell it. I believe the CSS you provided will be a better solution. Google is going to see the text within the header tag so the content is there. I don't believe it will pick up the image as it as set as a background image so hopefully I'll be able to sell this now. Thank you!

 

You can also look into Cufon or sIFR if the font is allowed for web embed.

 

I will check that out as well. Thanks.

Off topic, but is there a way to preview how Google is going to interpret my page so I can confirm these ideas?

 

Now i must thank you for asking this question. I found this site will let us preview how a page will look like in a text only browser which is pretty similar to Google Crawler's eyes i think. Someone correct me if i am wrong.

http://www.delorie.com/web/lynxview.html

 

embedding font is not a good option. some browsers will disregard that leading visitors see default font or nothing.

 

Make use of facefonts to help in using fonts from the server

Anyone know what to do with the 960?

 

Your best choice is probably Cufon.