Font embedding with css:
the @font-face selector ... and more

Always your fonts in a web page?

Using a special font face in a web page, which is expected not to be installed on the machine of the visitor: not possible (yet), though ... a bit possible!

Introduction

Testing the universal way

Disappointing results

Way out 1: server adaptation

Way out 2: WEFT?

Testing the WEFT way

Introduction

With the @font-face {...} selector you have the possibility to import a font in a webpage. If it is not installed on the visitors computer, it is temporally available during the visit of your page. Sounds beautiful, is as simple solution, but ...:


Easy reading article: Anne van Kesteren's weblog 20th August 2003.

Workaround? - If you insist to have your own font for some purposes (for instance: a company house style in the headers), you always can make an image of the desired words.


But in some cases it is possible to make a cross browser font embedding or an IE-only font embedding!
 

Testing the universal way

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>

css-validator:

 

This paragraph uses the
embedded 'Ace Crikey' font

( embedded as *.ttf file )


and should (if css2 or css3 compliant browser; or in case the 'Ace Crikey' is already installed on your system!) display like:

( image )
 

Here is in the same way the 'Trains' font (a dingbats "font") as embedded ttf:
 

...opOte.



which should (if css2 or css3 compliant browser; or in case the 'Trains' is already installed on your system!) display like:

( image )
 

Disappointing results

As expected, the results are not so good.

Anyway under Win98SE: with Firefox (1.07), IE (6), Opera (7.54 and 8.01), Netscape (6) and Mozilla (1.71) there are no embedded aces or trains displayed on screen.

Way out 1: server adaptation

Depending on the web server configuration, embedding of fonts is possible though. This needs a special server side program, then it fits for most client side operating systems and browsers.
One of them is the GlyphGate program (early versions known as FAIRY). - I didn't Google for more.

Way out 2: WEFT?

Some years ago Microsoft has developed an own method to embed fonts in a website (for IE 4.0 or higher).
If a font face is thrown in an *.eot file ("Embedded OpenType"), and uploaded of course, then IE can display it during the visit of the page.
In 1997 Microsoft released the first version of the Web Embedding Fonts Tool ("WEFT"). This program allows to create font objects that can be linked to Web pages.
The file format is "*.eot" (Embedded OpenType).
The most recent version of the tool is WEFT 3 (Test version WEFT3.2b1) of February 2003. After that, it's a bit silent: the WEFT site's latest update seems to be of May 2003.
WEFT is IE-only.

WEFT is not suitable for all font faces. *)
WEFT is free downloadable.

More information:

Download:


*) Warning!

For instance: sometimes a fantasy font just has not the right properties to make an *.eot file of it.
And: some type designers don't allow their fonts to be embedded - this is included in a "fsType bit setting" of the TrueType file specification. This has to do with copyright and licenses... See this w3c document.
 

Testing the WEFT way

Would like to see it with own eyes - so downloaded the WEFT3 package and tried...

<style type="text/css">
    /* $WEFT -- Created by: francky on 03-09-06 -- */
@font-face {
    font-family: IE_ace;
    font-style: normal;
    font-weight: normal;
    src: url(acekrik0.eot);
}
.ie-ace {
    font-family: IE_ace, "Times New Roman", serif;
    font-size: 230%;
}
</style>

css-validator:

 

This paragraph uses an
embedded 'Ace Crikey' font,
but that can be seen in IE only ...

( embedded *.eot file )


Though not valid css2.1, it's working in IE!
The rest is showing (in this case) the Times New Roman, or - if not aboard - the default Serif of the browser.