Singapore CMS Web Design

Gary Consulting Group - Singapore CMS Web Design

Timely Support and Clarity in your journey to harness the power of the internet
Email:
sales@name1price.com
Call:
+1 415 300-0019
Serving Fonts with the Lighttpd Server - Fighting FOUT

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';
}
 
Tuesday, 22nd Aug 2017
Content Management System powered by Gary from Name1Price.com