5 Techniques For Custom Font Embedding

Have you ever wanted to use different type of fonts in your web designing projects and ignored that idea because of unavailability or improper rendering of fonts?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.

1. 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.

2. 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.
3. 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.
4. 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.
5. 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.

Tags: Font, Tips