3

Why do we need italic/bold font files if we have <em> <strong> that can italicize and bold respectively ?

Arial Narrow Italic Arial Narrow Italic Bold

Is there a special scenario where having the file can actually make it more perfect than what browser can render ? For example browser might have a generic way of making italic vs bold however a specific italic/bold file could make it much better ?

How do I actually use them in the application ? For example I need Caslon 540 Caslon 540 italic , and I get two files for both . Do I treat them as entirely different font like 

@font-face {
  font-family: Caslon;
  src: url(fonts/Caslon.ttf);
}

@font-face {
  font-family: CaslonItalic;
  src: url(fonts/CaslonItalic.ttf);
}

This looks simpler to implement ?

or do I actually have one Font with differnet font:style specification ?

@font-face {
  font-family: Caslon;
  src: url(fonts/Caslon.ttf);
    }

@font-face {
  font-family: Caslon;
  src: url(fonts/CaslonItalic.ttf);
  font-style: italics;
}

Does this have an overhead that you need to have a font-style:italics embedded into each element's html attribute or would automatically detect that its CaslonItalics ?

There is a somewhat similar question in its essence here : <strong> vs. font-weight:bold & <em> vs. font-style:italic

Community
  • 1
  • 1
Nishant
  • 20,354
  • 18
  • 69
  • 101
  • 1
    They aren't true italics or bold unless you use the specific font. – Daniel A. White Sep 17 '14 at 19:54
  • When you say "true italics" what do you mean ? How would I use them correctly ? Is 1 or 2 option better - any thoughts ? – Nishant Sep 17 '14 at 19:56
  • 1
    They may have stylistic changes. http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face?rq=1 – Daniel A. White Sep 17 '14 at 20:00
  • 1
    @Nishant If you don't supply proper font faces for italic, bold, or any stylized texts, user agent mimics their stylized appearance. So, there may be stylistic differences. https://spaceninja.com/2010/11/29/font-face-faux-styles/ This might be helped. – rosshjb Sep 27 '21 at 05:05

1 Answers1

5
  1. The end-user's browser may not have the font installed. Remember, the content is being rendered client-side, not server-side.
  2. There may be something about your content that requires some aspect of the specific typeface (odd kerning, specific sizes available, special characters, etc.) for best readability.
  3. The <i>, <em>, etc, HTML tags don't do anything to the typeface at all -- they tell the client how they should be rendered, and the client chooses the appropriate typeface.
  4. You can use CSS to tell the rendering engine to use a particular typeface for italics, like i, em { font-family: Caslon; }'. This is discouraged, though, because you're taking choice away from the reader -- who may not like your typeface choice.
RoUS
  • 1,888
  • 2
  • 14
  • 29
  • Yes I will deploy it using URL / Data URI . Thanks I will go through this to understand this in depth . Its subtle sometimes . – Nishant Sep 17 '14 at 20:02