CSS3 @font-face Custom Font Solution

Implementing custom web fonts have been a work in progress for the design community. You will always come across a browser/OS issue when dealing with customized fonts. Here is my look on the current @font-face solution that is widely being spread.

The Basic

The basic CSS3 @font-face solution is very simple to use and implement. All you need is to upload the font file source and add some css to your stylesheet.

@font-face {
  font-family: "Custom Font Name";
  src: url('font-source.ttf');
}
h1 {
  font-family: "Custom Font Name";
}


Cross Browser Compatibility

Every browser supports different font formats, for example Firefox supports EOT & TTF, IE supports EOT, and Safari supports OTF, TTF, and SVG). Here is the syntax to support multiple browsers. For more information about implementing @font-face using this method please check out Font Spring

@font-face {
  font-family: 'Custom Font Name';
  src: url('font-source.eot'); /* IE9 Compat Modes */
  src: url('font-source.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font-source.woff') format('woff'), /* Modern Browsers */
    url('font-source.ttf') format('truetype'), /* Safari, Android, iOS */
    url('font-source.svg#svgFontName') format('svg'); /* Legacy iOS */
}


Too Many Font Formats!

"Wow, that's a lot of font formats I need!" Don't worry there is a tool to export the fonts into all the different formats needed. Check out the Font Squirrel Font generator

A Firefox Issue?! Face Palm

To prevent the fonts from flicker/delay when the page loads you need to preload the fonts. Firefox starts re-rendering the text after window.load event, causing a flickering effect. Here is a javascript solution hide the content and after window.load show the page.

var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
  s.textContent = 'body{text-indent:-9999px}';
  e.firstChild.appendChild(s);
  function f() {
    var ffrendertime = setTimeout ( function(){s.parentNode && s.parentNode.removeChild(s)} , 200 );
  }
  addEventListener('load',f,false);
  setTimeout(f,2000);
}


Note: Before implementing a font, check the licensing information. You may want to check Font Spring or other font sites to buy a license.

Go font some faces!
-justin