Gary Consulting Group - Singapore CMS Web Design

By default the Lighttpd Web Server does not recognize font files such as the eot (Embedded-opentype), woff (Web Font), ttf (True Type Font) and svg. So when these font files are served to end users they are served as "Application/Octet Streams", thus they are never cached by the Browser.

The fact that the Browser never cache these font files means that each time a page loads, these font files need to be loaded from the server. Translated into user experience terms, this means that users will experience delays in the display of custom fonts aka FOUT.

To help the Lighttpd Web Server serve these font files in their proper format, you will need to insert the following entries in the lighttpd.conf file under the directive mimetype.assign

• application/vnd.bw-fontobject eot
• application/x-font-ttf ttf
• application/x-font-woff woff

Now that you have done the above you will need to enable the mod_expire module for the directive server.modules in the lighttpd.conf file. This allows the Lighttpd server to set expires header to items server to browsers. The expires header is a special information found in the header of a document served over the internet that tells the receipted (usually a browser) how long to keep the files in local cache

Thereafter, you will need to set the following in the lighttpd.conf file.

$HTTP["url"] =~ "\.(eot|svg|woff|ttf)$" {
     expire.url = ( "" => "access 7 days" )
}

The above directive tells the Lighttpd server the expiry date to set for font files.

Once you are done with all of the above simply restart your Lighttpd web server with the command sudo /etc/init.d/lighttpd restart if you are using Unix or Linux

Last but not the least, you will need to declare the custom fonts in your css file (cascading style sheet) like below

@font-face {
    font-family: 'OpenSansLight';
    src: url('OpenSans-Light-webfont.eot');
    src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Light-webfont.woff') format('woff'),
         url('OpenSans-Light-webfont.ttf') format('truetype'),
         url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Once you have done the above, you could simply start using the font as you would any other standard fonts as below

.styleName{
font-family : 'OpenSansLight';
}