CSS font with non-standard styles

Question

Using a font family that has non standard style names, such as 'Inline' or 'Outline' rather than standard styles such as 'Bold' and 'Italic', how can the different styles of the typeface be selected with css?

Setting the font-family picks one style from the family, but setting the font style or any other properties does not work (except oblique and italic will create fake obliques from the arbitrarily chosen style).

Specifically in this case I am displaying the fonts within a webview in an iOS app. For all intents and purposes, the fonts are installed on the machine, not loaded from any external service or with @font-face.

Answer 1

You need to inspect the properties of the font to find out “Font Family Name” and “Font Subfamily Name”. It is quite possible that the former is, say, “Foobar Inline” or “Foobar Bold Outline” and the latter is “Regular”. Then the font would be a regular font in terms of font specifications and CSS, and you would need to use the specific name (with font properties like font-weight set or defaulted to normal).

Finding out font properties can be surprisingly difficult, depending on environment. A great tool is DTL OTMaster Light. Using it, open a font, open “Root”, then opne “'name' records” under “'name' table”, and you’ll see data including the names mentioned (as explained in the comments column there).

Answer 2

What kind of font are you using? Maybe the font simply does not provide any custom styles for italic or bold usage.

Do you have any typographical or syntax errors in your CSS code? Let us see.