P. 1


|Views: 162|Likes:
Published by Bogdan Darius

More info:

Published by: Bogdan Darius on Feb 10, 2013
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





One thing to be aware of is that no matter which method you utilize, if you
want to apply a different font face—for example, italic—make sure you
define a link to the relevant file in your @font-face rule. If you don’t, some
browsers (notably Firefox) will attempt to re-create the face artificially, often
with ugly results.

Here’s an example of how not to define an italic weight:

@font-face {

font-family: GentiumBookBasic;
src: local('Gentium Book Basic Regular'), url('GenBkBasR.ttf') format('truetype');

h2 {

font-family: GentiumBookBasic, sans-serif;
font-style: italic;


You can see that my @font-face rule uses the regular face of the Gentium
Basic font, but the h2 element has an italic style declared on it. Before I show
you how that renders, here’s the way I should have done it:

@font-face {

font-family: GentiumBookBasicItalic;
src: local('Gentium Book Basic Italic'), url('GenBkBasI.ttf') format('truetype');

h2 { font-family: GentiumBookBasicItalic, sans-serif; }

In this code, the @font-

face rule defines the italic
face of Gentium Basic, which
is then applied to the h2 ele-
ment. You can compare the
two different approaches in
Figure 5-3.

As you can see, the two
examples are quite different. The first is the default font slanted to fake an
italic (using the first code example); the characters are larger, slightly dis-
torted, and spaced inconsistently. The second is the true italic font face (using
the second code example), which uses characters designed specifically for this

Be aware of this issue when using Firefox and Internet Explorer; in situa-
tions where the “bad” code example is applied, WebKit ignores the font-style
property and displays only the regular font face. The same warning applies
for all the different font faces: bold, italic, bold italic, small caps, condensed,
and so on.

Figure 5-3: Comparing an artificial italic (top) with a
(true) italic font face

Download from Wow! eBook

54Chapter 5

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->