I have an arbitrary ttf font that I want to use in my web application.

How can I tell which characteristics like "bold", "italic" are available in this font?

Background: I want to avoid that I have to try out all the different settings like:

font-weight: bold;
font-style: italic;

in order to see which one has an effect on the appearance of the font on my web site.

I have an arbitrary ttf font that I want to use in my web application.

How can I tell which characteristics like "bold", "italic" are available in this font?

Background: I want to avoid that I have to try out all the different settings like:

font-weight: bold;
font-style: italic;

in order to see which one has an effect on the appearance of the font on my web site.

• javascript
• html
• css
• fonts
• truetype

• if you are on windows you can view the font set by right clicking and open - usually though you would have a different ttf for each type of character – Pete Commented Jan 24, 2017 at 9:15
• I'm pretty sure that a ttf only has a single weight and that adding font-weight: bold or other type styles merely fakes the effect. If you want true type features you need to use one of the open type formats such as what Google supplies. – R Reveley Commented Jan 24, 2017 at 9:36

2 Answers 2

Let me cut that thought short: that's not how ttf (or in fact, any) font resources work. Bold, Italic, etc are separate "physical" files on your harddisk, and the kind of style toggling you see in Office applications, text editors, etc. come from the OS showing you an abstraction: it only shows you the font family name, rather than the list of individual ttf or otf files, and then shows you style/weight UI controls, which trigger an actual font resource switch from one file to another without you ever noticing.

So: if you have a single ttf file, that file represents only one, specific , font face expression (regular, bold, italic, bold-italic, or even something more detailed based on OpenType metadata properties).

To make things even more fun: if you want to use fonts in CSS, CSS doesn't even care about what a particular font resource is. It completely relies on you to tell it what it is, and you get to lie: CSS will believe you. If you use an @font-face rule you get to say which font file to use for a particular combination of font-* properties, so you're in the driving seat:

@font-face {
  font-family: MyFont;
  /* CSS has no idea, nor does it care, what this font "really" is */
  src: url('myfont-Bold-Italic.ttf') format("truetype");
  /* so we tell it this font is applicable to weight:100, or ultra-thin */
  font-weight: 100;
  /* and we also tell it that this font is applicable in "normal" style */
  font-style: normal;
}

And presto, as far as the page styling you just defined, using MyFont with normal style and weight 100 will load whatever ttf resource you said it should use. The CSS engine does not care or even know that the resource you told it to use is "actually" a bold italic expression of the font family. All it knows is that you said this font had to be used for weight:100/style:normal so that's what it's going to use in something like this:

body {
  font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}

h1 {
  weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}

2019 edit

OpenType introduced font variations (FVAR) which allows a single font to encode an infinite spectrum of variable vector graphics, which means that if the browser you're targeting supports FVAR OpenType, you can now load a single font as your @font-face instruction, with a new format string that indicates it's variable, and instead in your normal CSS indicate which specific variation you need by specifying the font-variation-settings property:

@font-face {
  font-family: MyFont;
  src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
  /* no weight or style information here anymore */
}


body {
  font-family: MyFont;
  font-variation-settings: 'wght' 435;
}

h1 {
  font-variation-settings: 'wght' 116;
}

While "plain" CSS only supports 9 font weights (100 through 900 in steps of 100), variations can use values from 1 to 1000 in steps of 1.

Each and every font (if weights available) comes in a separate true type format file for each and every weight of the font.

e.g.

Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf

Therefore, you need to specify which is which in Your CSS file like so:

@font-face {
    font-family: 'Roboto';
    font-weight: normal;
    url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}

@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}

@font-face {
    font-family: 'Roboto';
    font-weight: lighter;
    font-style: italic;
    url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}

In your case, you can view the particular file directly by clicking on it twice in the Windows/MacOS/Linux explorers.

If you want to use a third-party software solution, I suggest that you give opentype.js a look.