When we define @font-face styles, we can define whether the referenced files are for the bold, italic, or bold italic versions of a font, as discussed in this SO question:
How to add multiple font files for the same font?
Example:
@font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
However, Font Squirrel doesn't generate @font-face kits this way. They do something like this instead:
@font-face {
font-family: 'FontinSans';
src: local('☺'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FontinSansBold';
src: local('☺'), url('fontin_sans_bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Which means in our CSS files we have to do things like this:
h2 {
font-family: 'FontinSansBold', Verdana, sans-serif;
font-weight: normal;
}
Why doesn't Font Squirrel use the font-weight and font-style declarations to distinguish the bold and italic variants? Why use a separate font family? Do they know something about (lack of) support for this feature in some browser?
Answer: yes you can only write font and specify all its values.
Answer: Font-weight is where you decide how thick the strokes of the letters are going to be. Font-style is where you decide whether the text is going to be italics, oblique (faux italics), or neither of these (i.e. roman or normal).
Parameter: The @font-face rule accepts four-parameter as described below: font-family: It specifies the font of an element. src: It is used to specify the location (URL) of the external resource ie., it holds the file path (url). font-stretch: It is used to set the text wider or narrower.
By default, Font-Squirrel does this in order to increase support with user-agents that do not follow specification (those that ignore font-weight
and font-style
).
If you do not care about those outdated user-agents, you may enable the "Style Linking" option which is available in the expert section of the @font-face
kit generator. Note that IE8 and below ignores numbered font-weight
values and only support normal
and bold
(and corresponding 400
, 700
weight values).
It does involve poking around inside the font to determine when a font is bold or italic. And certain bits must be set inside the font in order for IE to pick up the style linking. Most bold / italic fonts have these bits set, but not all. We are working on a way to make this more automatic.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With