Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am building a small portfolio website for a friend, and being in advertising and all, she hates the standard fonts and wants everything written in a custom font.

As CSS font-embedding is not really an option for the moment, all texts (fortunately, there are not many of them) will be put as images.

How could I still have the images content indexed ? For small texts (links, menu, etc...), I put the text in the alt attribute, but for something longer, I don't think that's the solution. What can I do ? Put the text in a hidden div next to the image ?

share|improve this question
6  
Why aren't web fonts an option? Is this a professional portfolio? If so, shell out the $50 and get a nice set of embeddable web fonts. Heck, you could split the cost with her and get an unlimited site license that you'll be able to reuse on future sites. There are also free web fonts out there that are fairly nice. It's far better than using images for body text. –  Lèse majesté Nov 19 '10 at 18:55
    
+1 @Lèse Really, that's the only way to go. –  Virtuosi Media Nov 19 '10 at 19:31
    
Well, it's not an option because it is not supported by the major browsers, is it ? –  Wookai Nov 19 '10 at 21:10
1  
Yes it is, all the way back to IE5.5... read my answer below :) –  Oscar Godson Nov 19 '10 at 23:31
    
Wow, what a disaster, this is a good example of why software professionals will never become obsolete... someone has to stop business people from making tragic mistakes. –  Mark Rogers Nov 19 '10 at 23:48

13 Answers 13

up vote 16 down vote accepted

EMBED THE FONTS!

No, but really, Embeddable fonts work on all current browsers (FF, Chrome, Safari, Opera) and IE5.5+ (yes, it's been working in IE since the 90s.)

Get your TTF upload it here: http://www.kirsle.net/wizards/ttf2eot.cgi

It'll give you the code and 2 files back (a TTF and then an EOT[M$ web font]) back. Copy, paste, upload, done. Win win!

And please, please, don't use images :)

If you DO however, write your markup as if you AREN'T using images and then add background images to all the elements and use text-indent:-9999px to hide the text. But please, just use embeddable fonts. Plus, if you're client/friend is a photographer she probably (shouldnt be) using an ancient browser (i mean, REALLY ancient, like, IE4...)

share|improve this answer
1  
Thanks, I really thought that font-embedding was not supported yet ! I'll give your website a try ! –  Wookai Nov 20 '10 at 9:16
    
Sure thing! Hope it helps :D –  Oscar Godson Nov 22 '10 at 2:52
    
It should be noted that you can't just go and use ANY font due to copyright issues - check the licensing terms first! –  DisgruntledGoat Dec 27 '10 at 13:50

Unless she is selling her own fonts on this website, I think you both could work more on CSS embedding (yeah, I read this is not an option for you now, but I insist).

If the case is a heavier graphic work upon fonts (gradient colors, twisted alignment, glossing, embossing, engraving...), making it really impossible to render thorugh CSS options as she needs, then I would recommend doing the following:

use images through CSS (perhaps a sprite), and hide the anchor text with text-ident. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

css

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

This is one technique. Yeah, I know, Google can punish that, but you know, I never heard about one single site penalized by using this.

Another way would be using img tag inside anchor tag ALONG with text, and then using CSS to hide text and correct positioning img if needed. This last option gives your the possibility to add alt, title, longdesc to image, increasing the information quantity and quality being indexed.

You can even go further with this last option and go for a even better and fresh solution: using figure tag, available for HTML5, along with figcaption. The idea is keep anchor->figure->img+figcaption.

Figcaption would make the anchor text role and you can use CSS to hide it.

Well, 3 solutions. Pick one. I'd go with the last.

share|improve this answer
    
Thank you very much for your answer ! Your solutions are really interesting, especially the last one. –  Wookai Nov 19 '10 at 21:13

Yuck. She really needs to get over her font issues as she's killing the accessibility of her site and is causing all other kinds of issues like slowing down the rendering of her pages, etc.

Having said that you can try adding the longdesc attribute to your images. It's hard to say how much weight, if any, the search engines give to it but it's probably more then zero.

share|improve this answer
    
Well, aren't alt tags here for accessibility ? Thanks for the longdesc tip though, I wasn't aware of its existence. –  Wookai Nov 19 '10 at 15:53
1  
+1 Sounds like an opportunity to educate the client on how her ideal fonts will not get ideal results ... though, unfortunately, some clients are highly resistant to accepting how HTML docs are "supposed" to work. –  danlefree Nov 19 '10 at 18:37

While web fonts are pretty much standard across all major browsers now, figuring out the cross browser intricacies of the different font formats can be tricky.

Google provides a nice web font api and font directory to help out here that you might find useful.

share|improve this answer

Using images even with alt tags as your only way to get to other pages in the site is not really going to provide a great deal of clarity to Google.

Your best bet is to convince your friend that you need text links somewhere on the page or site in order to solve the problem. For example if you are able to setup a Sitemap page with all text links or a drop down on each page with all text links that should work. It won't cause any damage to have that in addition to the link images.

I would suggest not using hidden links as Google can see this as being nefarious and reduce your site's rank or mark it as spam.

share|improve this answer
    
I will definitely set a sitemap up, but this will not fix the content indexing problem... –  Wookai Nov 19 '10 at 15:54
    
@wookai - Google will index image links it just may not know as much about them. Hence if you have a Sitemap page with full text in each link it will give Google more information about your site's pages. –  RandomBen Nov 19 '10 at 16:02

As others have suggested, you don't have to go with the standard "web-safe" fonts. There are many font replacement techniques available now that will work in a cross-browser manner. For a good overview, check out: The Web Designer’s Guide to Font Replacement Methods. You don't have to give up on SEO or resort to image SEO. You can have your cake and eat it too.

share|improve this answer

I used to do this with background images and hidden nested spans. Looks great to text browsers and search engines, and has custom fonts for richer browsers.

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

Output:

Welcome to Hell on Wheels

See it in action.

There's really no limit to the amount of text you can replace with this method (appropriate tags and hidden styles in smart ways) but honestly the custom font your client wants to use is likely far less readable than all of the common web fonts. You should really try to talk her down.

share|improve this answer
    
Have you tested this on text browsers? I know many screen readers ignore display: none text, and I think text-only browsers do too. –  Lèse majesté Nov 20 '10 at 4:47
    
Both lynx and links display the text. If it's an issue with screen readers, I'd use h1 span { position: absolute; left: -9999px; }. I don't have a screen reader handy for testing, though. –  Annika Backstrom Nov 20 '10 at 15:14
    
I guess you're right, but be aware that this won't work on most screen readers: css-discuss.incutio.com/wiki/Screenreader_Visibility Also, I use NVDA for testing on windows. It's a FOSS screen reader if you wanna check it out. –  Lèse majesté Nov 21 '10 at 13:34

sFIR might work for this purpose, but using it will be resource-intensive on the client side and it may get tricky if you need to embed links in the text.

share|improve this answer
1  
Still, it's 100% better than having images as body text. That is probably one of the least professional things you can do on a website--no highlighting, no copy-and-pasting, no-searching, no resizing... –  Lèse majesté Nov 19 '10 at 18:50
  1. Just use webfonts. Virtually any browser will display them correctly (if you put them in alternative formats). Just host them as a regular files (which they are). Here is really good tutorial. One more advantage: you don't need to think how to trick google

  2. sIFR, Cufón, FLIR or other image sprites - that's really old-style bull-crab which was invented for unknown reasons ;) don't use that.

  3. A lot of text typed in a couple images it's:

    • long load time
    • anti-seo (of course you can use cloaking and serve different content to google bot and user, but it's just more work and testing and also risky [rival site owners may tell on you to google:])
share|improve this answer

Try using the typeface.js library! You can use any custom TrueType or OpenType font just by including the library in the top of your page and giving your special-fonted elements a special class. It's free, open source, cross platform, and search engines will see your text too. No images necessary; the library handles all of that and you simply design it like a typical webpage.

share|improve this answer
1  
Brilliant, but highly illegal in most cases. =P There are very very few commercial fonts that are legal to embed directly on web pages, even if you purchased a license for it. I'm guessing part of the reason why type foundries finally conceded to web fonts is so that the fonts being embedded would not be (easily) usable for other purposes. But if you upload an OTF or TTF font, then anyone who visits your site will get a copy that they can now do whatever they want with. –  Lèse majesté Nov 20 '10 at 0:30

Lots of great options here for answers. Seems Font Squirrel (http://www.fontsquirrel.com/fontface/generator) deserves a mention. And yeah, the Google Font APIs are great as well.

As for image substitution, personally I'd recommend a span in an element, with the image as the background on the parent of the span. But instead of display:none on the span, position:absolute it off screen. That way screen readers still get that content.

I seem to recall moving off screen winning out over indent, but maybe I've got my silly pants on.

But double also yeah - embed those fonts.

share|improve this answer
    
oh, and here's my vote against sifr and cufon. –  folktrash Nov 20 '10 at 0:40

Use one of the Font-Face kits from Font Squirrel. The kit provides 4 different font formats and the correct CSS required to use them. Works in all modern browsers and in legacy IE versions too!

share|improve this answer

Build the site with images. Then in a dew months when she comes back complaining about not being found by the engines re-build the site with text and charge another fee!

share|improve this answer
3  
this seems a bit irresponsible to me, though.. –  Jeff Atwood Nov 20 '10 at 0:55
    
OK, then how about creating a clone of her favorite website using images for text and modifying her hosts file to point to the clone, and force her to use that site for 2 weeks? –  Lèse majesté Nov 20 '10 at 4:45
    
@Jeff well, I was being just a little tongue-in-cheek...... –  David Heffernan Nov 20 '10 at 10:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.