Use Photofonts

Use photofonts on the web

Web designers and web developers can think of photofonts as an efficient means to use custom, non-standard fonts on a website in a standards-compliant, search-engine-friendly way, and without converting the text into “flat” graphics.

Creators of web pages often wish to use custom fonts on their pages instead of standard fonts such as Verdana, Georgia or Arial. The use of non-standard fonts can dramatically increase the attractivity of a website and help apply corporate branding on the web. To use a photofont on the web, the user needs to embed it on the site — this is done through a simple conversion using one of our products, Photofont WebReady.

The product of the conversion is a Flash®-based embedded web font, which is a combination of Flash® (.swf), JavaScript (.js) and CSS (.css). The glyph shapes are stored inside of an .swf file, while JavaScript and CSS is used to dynamically substitute normal HTML or XHTML text with the embedded web font in the user’s browser. If the browser does not support Flash® or JavaScript, or if those are disabled, the original HTML text is rendered unchanged. In any case, the text remains searchable, accessibility-friendly and search-engine-friendly. It works with search-replace, screen readers and other assistive technologies.

Flash-based web font embedding works on over 90% of desktop and portable computers running Windows, Mac OS or Linux with Flash 6 or newer installed, and using Internet Explorer 5 or higher, Firefox, Opera 7 or higher, Safari and a few other browsers. And if the method does not work on a certain browser or operating system, original HTML text is delivered so the text is readable in any case.

Photofont WebReady supports two forms of Flash-based embedded web fonts: embedded web outline fonts and embedded web photofonts.

Web photofont

Web outline font

In an embedded web outline font the glyphs are stored as scalable outlines while in an embedded web photofont the glyphs are represented by bitmaps that are fixed-size but can use the full RGB color range and alpha transparency.

The concept of Flash-based embedded web fonts is based on sIFR, an opensource package developed by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben. For embedded web outline fonts, Photofont WebReady 1.0 implements an extended and customized form sIFR 2.0+ — so all documentation and resources that you can find on sIFR will also likely apply to WebReady. For embedded web photofonts, WebReady uses a similar concept but the programming code is not based on sIFR.

In addition to web font embedding, our free Photofont Start plugin for Adobe Photoshop® and Illustrator® can be used to create static web graphics that use photofonts, and our free Photofont ID plugin for Adobe InDesign® can be used to create downloadable PDF documents that use photofonts.