I am writing @font-face rules for my Web site.
I’ve seen various kinds of naming for local system fonts, like:
"FontName"
"Font Name"
"Font-Name"
"Font Name Bold"
"Font-Name-Bold"
"FontNameBold"
Do the operating systems follow any rules regarding the naming of fonts?
Are the names case-sensitive?
I know the font chooser in Windows list fonts by name in one field, and the weight is in a different field. Would a "Font Name Bold" match a bold font of family Font Name on Windows?
edit:
I’m asking what strings should I use as the local()
value for different weights and styles of the same font family. What is the string value of local()
matched against?
As per the @font-face specification for src
:
For OpenType and TrueType fonts, this string is used to match only the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so authors should include both of these names to assure proper matching across platforms.
So the answer is, quite literally, "it depends on what's parsing the @font-face rule". Thankfully, this is CSS, so we can indicate multiple sources, which includes multiple local
sources:
@font-face {
font-family: "My Gentium",
src: local(Gentium Bold), /* full font name */
local(Gentium-Bold), /* Postscript name */
url(GentiumBold.woff); /* otherwise, download it */
font-weight: bold;
}