Beautiful typography
Now available
With a bit of clever styling it is now possible to include selectable non-standard fonts in your browser.
With a growing range of open source and free fonts as well as design-your-own or commercial fonts it is now even easier to include beautiful typography on your site.
This method works across all major browsers and is designed to work with text-based browsers for accessability.
It also supports single, double and triple click selection.
How?
We start by using GD and Stewart Rosenberger's Dynamic Text Replacement method.
We place the generated .png font as a background image so it doesn't get in the way with text based browsers. We then add the real text inside a span which will be used for both accessability purposes and also when we want to select the text.
The last bit of magic is inside jQuery.
jQuery!
jQuery is used to grab the text inside each span and uses a class to determine which font to substitute.
The text in the span is then set to being completely transparent so that the background image can show through. The span is also placed absolutely so that it can later be lined up with the font.
Using jQuery when someone clicks over the font the text in the span is set to being completely opaque and thus selectable. If there is text selected it stays opaque until focus is lost.
Begin using accessable, beautiful non-standard fonts in your designs today