specifying a custom font in css (otf) - How to specify bold/italic/etc when provided multiple otf files?

Question

I'm a little unclear on how to use @font-face in my current situation. The client provided me with several font files such as FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, etc.

I understand that typically I would do the following:

@font-face {
    font-family: FontName;
    src("path/FontName.otf") format("opentype")
}

Do I have to specify each one of the font names provided? How does css know which font is the default and which font to apply to bold (when the <strong> tag is used) or italic (when the <em> tag is used?

question from:https://stackoverflow.com/questions/65830319/specifying-a-custom-font-in-css-otf-how-to-specify-bold-italic-etc-when-prov

Answer 1

You would use multiple @font-face 's, like so:

@font-face {
  font-family: "FontName";
  src: url("FontName-Black.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-BlackItalic.otf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-Bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

Then to specify just use this:

body { font-family:"FontName", //you can add the exact fonts you want to use here }

h1 { font-weight:bold; }

p { font-style:italic; }

strong p{
  font-weight:bold;
  font-style:italic;
}