As a frontend developer, I don’t do much design work. I am usually handed a design and asked to build out the HTML and CSS before handing it off to the backend developer. I’m given the design, open it up in Photoshop, and as I go through and make my edits, I will sometimes notice headlines with fonts that are not safe for the web.
If you use an image to replace those headlines, it hurts the site as far as the SEO goes, right?. Wrong. Using CSS there are plenty of ways to keep the markup for the web crawlers, and the viewer will still see the design with the correct font face. To do this, you just us a simple image replacement technique with CSS, probably ten different ways to do it. These techniques work great, but what happens when your client asks you to change that headline to something else? You have to then go back to Photoshop, edit that piece of text, re-save the image, and then update your CSS with the new image name. Sounds like a lot of work to change one line of text right?
Allow me to introduce my new friend, Cufón. Cufón is a JavaScript library that renders a font file into a script that allows you to replace HTML elements on a page with that specific font file. Pretty slick right? Now when your client asks you to change the text in a headline, you only have to change it in the HTML, instead doing all of that other work!
So, whats the browser compatibility? The good news is that it works in IE6. Need I say more? And, yes the standards too (Firefox, Safari, Chrome). You can see a full list here.
One more note worth pointing out is that if the user has JavaScript turned off for some reason, then they wouldn’t see the pretty font face, but they would still see the heading on the page. So for the next project you get, don’t stress because your designer used non-web safe fonts, go ahead and try it out — it’s easy to implement into any site. You can “see” Cufón in action at The Visual Click, or over at Press75.
Do you have any secrets to add or other pieces of advice? I would love to hear your thoughts.
