StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy not define font-weight or font-style in @font-face, Font Squirrel?
text
Body
copied!<p>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:</p> <p><a href="https://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face">How to add multiple font files for the same font?</a></p> <p>Example:</p> <pre><code>@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; } </code></pre> <p>However, Font Squirrel doesn't generate @font-face kits this way. They do something like this instead:</p> <pre><code>@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; } </code></pre> <p>Which means in our CSS files we have to do things like this:</p> <pre><code>h2 { font-family: 'FontinSansBold', Verdana, sans-serif; font-weight: normal; } </code></pre> <p>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?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload