Font Replacement with @font-face

One of the current web design trends is the use of certain fonts that are not always owned by Internet users. The aim is for web design looks unique and fonts match the design theme is expected. There are several ways that we can use, such as using the @font-face which I will share with this article.

@font-face allows for fonts to be downloaded from a web server to the users computer to correctly render a given font. Therefore the desired font will not immediately appear immediately, but it takes a few moments until the custom font ready. Because @font-face has been around for a while, its one of the only CSS3 features that is supported by all browsers. However, the older IEs require for the font to be in the .eot file format. The good news IE9 now supports the .woff format.

One issue to be aware of is licensing. Be sure the font you’re creating the @font-face files for actually supports being used as a web font. Another issue is the Flash of Unstyled Text (FOUT). In Firefox, basically the text is in a default webfont until the custom font is ready. Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self. (This moment should be familiar to you if you’ve used sIFR)

There is a true bug with the older IEs, even when an .eot file is established and is stacked correctly in the @font-face declaration, the IEs still may not render it doe to being distracted by the subsequent values. To get around this, it helps to have two @font-face declarations, the first one with the .eot by itself, and then the second with the standard @font-face declarations.

There’s also a bug with WebKit browsers when applying font-weight:bold or font-style:italic, it doesn’t work. The fix, add normal to font-weight, style and variant in the @font-face declaration to set a baseline.

This solution incorporates a fix for IE bug and sets a baseline for font weight and variant changes. The syntax is:

@font-face {
	font-family: 'QuickEndJerkRegular';
	src: url('quick_end_jerk-webfont.eot');
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}
@font-face {
	font-family: 'QuickEndJerkRegular';
	src: local('☺'), url('quick_end_jerk-webfont.woff') format('woff'), 
	url('quick_end_jerk-webfont.ttf') format('truetype'), 
	url('quick_end_jerk-webfont.svg#webfontuXAMUfqh') format('svg')%3toB
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}

h1 { font-family: QuickEndJerkRegular, Arial, sans-serif; }

I hope you enjoy this turial, please subscribe to Grafisia RSS feed or subscribe via e-mail.

Download SourceDemo

Leave a Reply