5 Image/Font Replacement Techniques For Custom Font Embedding

Custom Font embedding into a website has always been a painful experience for web developers. They always need to check if the font they are using is supported in their visitor's browsers, and if download request them to download the font.

With latest developments in web design, we now have viable technologies to implement custom fonts on a website. The new technique that seems to gain immense popularity nowadays is Image Replacement (IR). What image replacement basically does is that it takes the wording of a sentence, generates an image, with the exact wording, with the custom font applied to it. It then replaces the text with the custom font image.  This greatly enhances the overall look of a design, and gives a fresh look to the words of the website.


Other Similar Projects reviewed on Codefusion Lab: Type Select, Typekit.

Facelift Image Replacement Technique

Facelift (FLIR, pronounced fleer), is script which allows you to dynamically create custom images for the words on your webpage. The image is inserted into your webpage using javascript. Elements like headings, paragraphs, etc, can be styled using FLIR. All modern browsers support this script. You can additionally extend FLIR using its plugin architecture. The guys who wrote FLIR also provide a commercial hosted solution (Facelift Premium), if you do not want to host the script on your server, but on thier own servers instead.

 

Typeface.js Image Replacement Technique

Typeface also allows you to embed custom fonts into your webpages. The only difference is that it uses javascript only to do the job. It will render the custom font using javascript. The only downside to this amazing technique is that your visitors won't be able to select the text. You also to convert the truetype font to a javascript file. An online font converter is available to do the job.

Cufon Image Replacement Technique

Cufon Image Replacement Technique is very similar to Typeface.js, reviewed above. It has the same working principle, and also has it own online font generator for you to convert custom fonts to a javascript file.

 

sIFR Image Replace Technique

sIFR Image Replace Technique utilizes Adobe Flash to generate the flash file for the custom font and displays it on your website using flash. It is needless to say that your users will need Adobe Flash Player installed on their computers to be able to view the custom fonts. However, if no flash is present on the visitor's system, the default text formatting will be used, and the user will see no difference.

 

PHP Image Replacement (PIR) Technique

This last method which I will review, uses a combination of PHP and JQuery (javascript) to generate image replacement for your custom fonts, and embed it into your website automatically. It has been designed, with size and speed in mind. It is very easy to use and the Jquery plugin written to manage the image embedding, handle all the dirty work for you.

 

More Resources

• Type Select Selectable Font Replacement
• Typekit – Hosted Font Replacement Solution
• Nine Techniques for CSS Image Replacement
• Facts and Opinion About Fahrner Image Replacement
• Dynamic Text Replacement

If you know any other image/font replace technique, please let me know in the comments!