Crowes Crowes -4 years ago 63
CSS Question

Italic Overwrites Standard?

I'm trying to declare various forms of the same font in my project. I want a

normal
and
italic
version of each font type under the same BrandonText name. As soon as I add the
italic
version in, the
normal
version is completely ignored.

@font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'BrandonText';
src: url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
url('/fonts/BrandonText-Thin.otf') format('opentype'),
url('/fonts/BrandonText-Thin.woff') format('woff'),
url('/fonts/BrandonText-Thin.ttf') format('truetype'),
url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
font-weight: 100;
font-style: italic;
}


Why is this, and is there any way to work around this?

Answer Source

You're overriding your normal @font-face by italic. Instead, just declare it once:

@font-face {
    font-family: 'BrandonText';
    src:  url('/fonts/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),
          url('/fonts/BrandonText-Thin.otf')  format('opentype'),
          url('/fonts/BrandonText-Thin.woff') format('woff'),
          url('/fonts/BrandonText-Thin.ttf')  format('truetype'),
          url('/fonts/BrandonText-Thin.svg#BrandonText-Thin') format('svg');
    font-weight: 100;
}

Then you can use same declaration for both cases. When you want italic, just add font-style: italic to element's css.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download