The lack of fonts available to web designers is a constant source of frustration.  Don’t panic though, just over the horizon is CSS font embedding, until then here is a simple solution to help keep your pages looking good while still keeping those search engine’s happy.

Firstly here is the CSS, I will explain in more detail later.

h1 {font: 18px  Arial, Helvetica, sans-serif; width:200px, height:100px; background: url(nasariklogo.jpg);}
h1 span {display:none;}

And here is the HTML.

<h1><span>nasarik.com tutorials life technology</span></h1>

So here are the details, the h1 contains the background image that is to be displayed as well as the text style, the h1 span is requesting that nothing should display.  So all you need to do is reference your h1 in the body with your text inside, then to hide the text add the span, easy really.  There are variations on this theme, for instance instead of using display:none; you can use absolute positioning to move the text off the displaying document.

This would look like-

h1 span {position:absolute; left:-2000px;}

Both give the same effect, but I prefer the first option as it simplifies your code just that little bit.  There are however a number of alternatives which are covered on Web Designer Wall.  I am now waiting for CSS and web browsers to catch up so that we can start embedding our fonts.