@font-face does not work properly for italic/bold fonts

Question

I am using a tool to generate automatic CSS, and it generates the following @font-face tag and the corresponding paragraph Style

@font-face {
    font-family:FF-Garamond-Italic;
    src:url("../fonts/16309_GARAIT (1).ttf");
    font-style:italic;
}

p.autoParaStyle3 {
    font-family:FF-Garamond-Italic;
    font-size:32px;
    line-height:40px;
    color:#000;
    text-align:justify;
}

Notice, that the font specified is already the italic version of the Garamond Font, and technically the line font-style:italic is redundant.

However, as is, this does not work (I tried in FF, Chrome & Safari), and ends up using the default system font instead. If I manually remove the font-style:italic line, then the text is correctly rendered in the Garamond Italic font as expected.

So, I have 2 questions

1. Why does this not work, meaning why does having a font-style:italic cause it not to work?

2. Is there a way to "override" the @font-face definition to use font-style:normal via javascript?
   The reason I am asking is that I don't control the tool that is generating the CSS above, so cannot touch that file.
   Also, I attempted to create a new @font-face in javascript with the same name, but I don't want to specify the "src" again in the index.html, as this file and the css file are further manipulated into different locations - so I want the "src" to be relative to the css file only, and be picked from there.

Thanks in advance!

Graniteware

This is a handy guide to the preferred @font-face setup: fontspring.com/support/installing_webfonts/style-linking See if it helps you out. I would avoid getting JS involved in this. – Barny

Answer 1

The setting font-style:italic is not redundant. It specifies that the typeface is italic, and this means that it will be considered a match when an element’s typeface has been set to italic, as it is by default e.g. for i and cite elements.

Thus, the answer to question 1 is that the p element has regular (normal) typeface declared for it, by default, so a regular typeface (here, the default font of the browser) will be used instead.

To solve this, add font-style: italic into the rules for p.autoParaStyle3.

The answer to question 2 is that this depends on the place of the @font-face rule in the DOM. For example, if it is in a style element, you can modify that element’s content with JavaScript. However, you shouldn’t need to ask this question.

(Having an entire paragraph displayed in italic is typographically questionable. You might be solving the wrong problem.)

Zaslow

Answer 2

For those using Create React App, font-face may give different results depending on entry point. This is what I've noticed:

1. If you choose to link the css file directly to your public/index.html then you can use font-face normally with one font-family and different font-style:

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
  font-style: normal;
}
.text-italic {
  font-family: FontName;
  font-style: italic;
}

2. If you choose to link the css file via Js for bundling, then you need to have a different font-family for all your italic fonts and use normal font-style.

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic";
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
}
.text-italic {
  font-family: FontNameItalic;
}

Auschwitz