CSS3 - Embedding Fonts

Being able to embed your own fonts into a web page is something that the CSS 3 fonts module provides for. For those of you who thought that this was available earlier than CSS 3, you are not mistaken as it was originally a part of the CSS 2.0 specification that was removed in CSS 2.1 because of the many issues involved in implementing it and the lack of support from browsers at that time.

Things are somewhat different now. While the limitations on which fonts you can use still exists, since you can only legally embed fonts that are in the public domain, most of the cross browser issues with respect to fonts have now been resolved provided that you create the font to be embedded in the several different formats that the different browsers expect and specify them in the appropriate way so as to minimise the possibility of multiple copies of the font being loaded into the page or the font being loaded when it already exists locally.

The following is currently considered to be the best way of specifying font embedding that will work across modern browsers (including handheld devices). Note that some browsers require that the font be stored on the same domain as the web page and so specifying absolute paths to the font will not work for those browsers. You also need to remember to check that the licence for the font you want to use actually allows it to be uploaded to the web and is not restricted to being used on your own computer.


@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
        url('myfont-webfont.woff') format('woff'),
        url('myfont-webfont.ttf') format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');


Unfortunately attempting to tell the browser to use the front from the local computer if it exists crashes Android and so the only fully compatible cross browser variant will ALWAYS need to download a copy of the font even if it already exists on the local computer. Since font files are huge compared to web pages this will significantly slow the loading of your page.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow