Two great ways to embed a font in your website

Have you ever wanted to use a nice looking font in your website before? Ever wanted to spice up your headings on your website by using a different font? Simply defining your font in the CSS won’t do the trick as not everyone would have that font installed on their computer system. So how do you embed a font in your website? Well, I have seen it done in a number of ways, including manually creating image files for all the text headings in your website. I would not recommend this method simply because it takes too long and there are much easier and nicer ways of doing it dynamically.

Edit July 2011: An even easier way to embed a custom font in your website is with Google Web Fonts.

Here are two of the best options I have come across to embed fonts in your website:

  1. Dynamic Text Replacement: This method involves dynamically creating image files from the text on your website and it is great for creating nice looking headings on your website.
  2. sIFR 3: This method uses a flash file to dynamically display your font and it can be styled using CSS.

I would recommend using either of these methods to embed fonts on your website. SIFR 3 is my favorite though, as it is very flexible and can be easily controlled using CSS. I will outline both of these methods below and help you get started using them on your website.You can also download the files for Dynamic Text Replacement and sIFR 3 below.

Dynamic Text Replacement

dynamic-text-replacement-demo
Dynamic text replacement involves dynamically creating images to replace and enhance page headings using only PHP and CSS. No javascript is required which may be an advantage for web designers trying to decrease the amount of javascript on their webpage. You can see a demo here.

How does it work?

This Dynamic text replacement method uses PHP’s output buffering functions to parse the web page for heading tags, extract the text from the headings and assign an inline style that points to the image generator script.

A CSS file controls the font-colour, background colour and also the size of the font.

Limitations of this method

  • This method cannot support very long headings as it can’t display text over multiple lines. So it’s only good for single line headings.
  • You can’t give your headings any style attributes (id’s or classes).
  • You can’t have different heading styles for different pages on your website. The style information is included in the script itself so it applies to the website as a whole.

Developers of this method

Original concept by Alex Giron, code and execution by R. Marie Cox.

Download Dynamic Text Replacement

sIFR 3 Font Embedding

sifr3-demo
Sifr 3 uses a combination of Flash, CSS and javascript to dynamically display fonts on your website. An swf file with a font embedded in it is used to replace certain CSS divs on your website. This is quite a clever and versatile method of font embedding as it can be controlled via CSS. It is also quite light as it only requires a small swf file along with a small snippet of javascript. Another great thing about sIFR 3 is that it is great for SEO, as it maintains the original HTML structure. A demo of sIFR 3 can be seen here.

How does it work?

sIFR 3 is made up from four parts:

  1. An SWF file that contains the font you wish to embed in your website. To use your specific font simply open the FLA file (included in the download below) and change the font of the dynamic text field then export the SWF.
  2. A javascript file called “sifr.js” which contains the script that makes sifr work. This file should just be included in the header of your website e.g.
    <script src="js/sifr.js" type="text/javascript"></script>
  3. Another javascript file called “sifr-config.js”. This file points to the SWF file you created. You also define the CSS styles of the div you are going to replace with the swf file.
  4. A CSS file which basically tells your browser to hide your original text as it is now being replaced with the nice looking font embedded in your SWF file. This CSS file needs to be included in your header e.g.
    <link rel="stylesheet" href="../css/sifr.css" type="text/css">

Limitations of this method

  • It is sometimes difficult to create a link from text that uses sIFR 3.
  • sIFR 3 relies on flash and javascript so it won’t display on browsers that don’t have flash and javascript enabled. This isn’t really a problem as sIFR 3 will revert back to the normal version of your text if javascript is not enabled and most browsers come with flash player anyway.

Developer of this method

The developer of sIFR 3 is Mark Wubben. Mark is a European Dutchman and web hacker, based in Copenhagen, Denmark. Supercollider is Mark’s freelance alter-ego.

Download sIFR 3

[Update: 27.10.2009]

Other great font embedding methods

great-ways-to-embed-a-font-in-your-website

Cufon

Cufon is one of the most popular font embedding solutions due to its simplicity to setup and use. It basically uses javascript and consists of a font generator and a Javascript rendering engine. It doesn’t use any flash so it loads quite quickly when compared to sIFR 3.

FLIR

Facelift Image Replacement is another clever way to embed fonts in your website. It uses PHP and the GD library to render text as an image behind the scenes. So you will need PHP and GD on your server to use this method.

PIR

PHP Image Replacement uses PHP and jQuery to dynamically generate images for your text. It  basically requires you to upload a standard font file to your web server and it uses this along with your CSS to display your font accordingly.

Font Jazz

Font Jazz implements a simple Javascript type rendering engine which actually converts each character of your text into an image with the specified font.

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , , , , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share/Bookmark

  1. nut. on May 17, 2009

    awesome!!

  2. Johnny on May 17, 2009

    Great thanks for that. I have tried using SIFR and it is great. I just use it to make the headings on my site look better.

  3. Anthony on May 17, 2009

    fantastic man, thanks for that ! absolutely what i’ve been looking for!

    now i can start embedding fonts for my fighter site :)

  4. Renaudl on May 27, 2009

    As great as SIFR is, I found it was a bit of a pain to actually setup and use. Anybody interested in text replacement should take a look at Cufon. Really easy to use, and it works with javascript only, no flash required. It may not be THE solution for everyone just yet, but it sure deserves a quick look.

    You can see it in use on our website : http://www.hooktstudios.com

    And the doc can be found here :
    http://wiki.github.com/sorccu/cufon/about
    http://cufon.shoqolate.com/generate/

  5. Musa on May 28, 2009

    There are few more way to do this. Few days ago i came to know Cufon(http://wiki.github.com/sorccu/cufon/about) which is something like Dynamic Text Replacement. But i am using sIFR for the last two years for couple of sites. Although it’s hard to tune but it’s great.

  6. Cre8ive Commando on May 28, 2009

    @Musa @Renaudl – Great thanks for the feedback. =)

  7. Aleksandar Tasevski on May 28, 2009

    I use PHP file, something like this

    include “text2image.php?text=The text with custom font”;

    that will create an image with the text and the desired font but has many limitations.

  8. atmawarin on September 2, 2009

    Thanks. Nice article. It would be even greater if you have a spare time to make a quick comparison between FLIR and SIFR.

  9. g works on October 15, 2009

    As a PHP developer, I have to say, I love the Dynamic Text Replacement. We can control the surprises in the server instead of leaving it for the individual users to find problems.

  10. Harsh on February 15, 2010

    good work
    thanks alot

  11. Mohammad Raihan Mazumder on September 25, 2010

    I used SIGNAGE.ttf font in my website & i can see when i open my site from my pc. But from another pc i cant see it. Bcoz my pc already have installed this font. Now i would lyk to know how can i embed / add for see from anypc in my website this font?

    Let me plz ASAP!
    Raihan

  12. Colin Gould on January 8, 2011

    Nice article!

    After mixed experiences with @font-face I’ve launched a simple to use dynamic text replacement service at renderedfont.com that uses client side javascript (using jQuery) to do all the hard work.

    It’s character limited but handles multiline text and offers some extra features like hover effects and rotation to suits most use cases.

    Very interested in feedback at this point while I work on a foundry of free fonts.

    Cheers,
    Colin

  13. Cre8ive Commando on January 9, 2011

    @Colin – Great work with renderedfont.com but I think the beauty of @font-face is that it’s not bogged down by heavy javascript. I noticed that your method requires jQuery, what’s the main advantage of using your method for font replacement? I haven’t actually had much trouble with @font-face so far.

    @Mohammad – All of the yechniques on this page will allow you to embed a font in your website so that the font can be seen on any computer. :-)

  14. E-Technologies on February 2, 2012

    Nice post. Fonts selection is very important for website deign. As per my opinion, I want to say that any font you can use in your website but more important that it should be eye-catching. To embed a font in your website you can use typography also.

  15. antique restoration michigan on August 3, 2012

    Great weblog here! Additionally your website lots up fast! What host are you using? Can I am getting your associate hyperlink for your host? I wish my web site loaded up as quickly as yours lol

Trackbacks

  1. [...] del.icio.us How to use custom fonts in your html | Digital Two great ways to embed a font in your website | Font Squirrel | Download Hundreds of Free High Performance Web Sites :: @font-face and { [...]

  2. [...] Two great ways to embed a font in your website | Cre8ive Commando Fonts have been lacking on the web for so long… now with a recent resugence in interest, the technology is finally catching up. (tags: @font-face fonts typography) [...]

  3. [...] and Times New Roman sound painfully familiar? Luckily there are quite a few different ways to embed fonts in a website including Cufon, sIFR, FLIR, PIR, Font Jazz and Dynamic Text Replacement. Most of these methods [...]


Have your say!