Databases
StackOverflow2013
Postsdbo
PODefining CSS @Font-Face bold italic
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODefining CSS @Font-Face bold italic
    text
    copied!<p>I am working on a project where I six weights/styles of the font I am working with. These include: regular, italic, semibold, semibold italic, bold and bold italic. I have the @font-face tags setup (in theory) the way they should show. What happens in reality however is that the bold is always italic. Is there anyway to declare these bold + italic weights so that they will work properly? I don't want to call different font-family names all over the place. Ideally I should just be able to declare the right weight and style and get the right version of the font.</p> <pre><code>@font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-bold-webfont.eot'); src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-bold-webfont.woff') format('woff'), url('agaramondpro-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-bolditalic-webfont.eot'); src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-bolditalic-webfont.woff') format('woff'), url('agaramondpro-bolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-italic-webfont.eot'); src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-italic-webfont.woff') format('woff'), url('agaramondpro-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic, oblique; } @font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-regular-webfont.eot'); src: url('agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-regular-webfont.woff') format('woff'), url('agaramondpro-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-semibold-webfont.eot'); src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-semibold-webfont.woff') format('woff'), url('agaramondpro-semibold-webfont.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'AdobeGaramondPro'; src: url('agaramondpro-semibolditalic-webfont.eot'); src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('agaramondpro-semibolditalic-webfont.woff') format('woff'), url('agaramondpro-semibolditalic-webfont.ttf') format('truetype'); font-weight: 600; font-style: italic, oblique; } </code></pre> <p>Any ideas to make that work?</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