Hi,
I've been working on an interesting project recently - I'm building my personal portfolio (slinq.com) and decided I wanted to use a font that isn't included in the standard set of "Web fonts". While IE supports a hacky way of sending a font file to the browser, this doesn't work in other browsers and I want my website to work in all browsers. I've therefore achieved my custom font by having a script running on the server render each fragment of text and send it to the browser as a GIF image. This is used for literally every bit of text on the site, including headings, titles etc. I am of course setting the alt tags on all of these images so that they contain the text content.
I am also trying to get my site to rank highly in the search engines - it's a bit of an experiment; can I get a site with no text content at all to rank for my search keywords? Obviously I'm following all of the normal link building and page optimisation techniques. I'm just wondering if anyone has attempted this before and has any practical advice for me?
One question in particular is in relationship heading tags (ie
etc). At the moment, my heading tags look a bit like this:
In other words, I'm putting the actual text of the heading within the heading tag, but using the text-indent CSS property to move it so that it's not visible on screen, I'm then using the background-image property to reference the image containing the text fragment. I know this could potentially be considered deceptive by Google, has anyone else had any successes or failures with this technique?
The other way that it occured to me to implement heading tags was something like this:
This is obviously less deceptive and cleaner code-wise but the actual text of the heading only occurs in the alt tag of the image. What are your thoughts on the relative merits of each approach?
Check out my website to see this in action - all feedback welcome:
http://slinq.com/ - My personal portfolio including photography of Cuckmere Haven and the South Downs (England)
Best regards,
~Kieran Simkin
I've been working on an interesting project recently - I'm building my personal portfolio (slinq.com) and decided I wanted to use a font that isn't included in the standard set of "Web fonts". While IE supports a hacky way of sending a font file to the browser, this doesn't work in other browsers and I want my website to work in all browsers. I've therefore achieved my custom font by having a script running on the server render each fragment of text and send it to the browser as a GIF image. This is used for literally every bit of text on the site, including headings, titles etc. I am of course setting the alt tags on all of these images so that they contain the text content.
I am also trying to get my site to rank highly in the search engines - it's a bit of an experiment; can I get a site with no text content at all to rank for my search keywords? Obviously I'm following all of the normal link building and page optimisation techniques. I'm just wondering if anyone has attempted this before and has any practical advice for me?
One question in particular is in relationship heading tags (ie
HTML:
<h1></h1>
HTML:
<h2 style="background-image: url(textfrag.php?text=Heading&size=32);
background-position:center top;background-repeat:no-repeat;text-indent:-4000px;">Heading</h2>
The other way that it occured to me to implement heading tags was something like this:
HTML:
<h2><img src="textfrag.php?text=Heading&size=32" alt="Heading"></h2>
Check out my website to see this in action - all feedback welcome:
http://slinq.com/ - My personal portfolio including photography of Cuckmere Haven and the South Downs (England)
Best regards,
~Kieran Simkin