Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why not define font-weight or font-style in @font-face, Font Squirrel?

Tags:

css

font-face

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?

like image 608
bjudson Avatar asked Sep 25 '10 21:09

bjudson


People also ask

Is it possible to declare font weight?

Answer: yes you can only write font and specify all its values.

What is the difference between font-style and font weight?

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).

What properties are in font face rule?

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.


2 Answers

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).

like image 143
Andrew Moore Avatar answered Oct 21 '22 23:10

Andrew Moore


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.

like image 21
Font Squirrel Avatar answered Oct 22 '22 00:10

Font Squirrel