I hope you read that title out loud in your best Seinfeld impression.
A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there?
I’m used to writing @font-face essentially like this:
@font-face { font-family: "My Custom Font"; src: url("path/to-font-file.woff2");
}But the spec does indeed include more descriptors:
@font-face { font-family: <family-name>; src: <url>; unicode-range: <urange>; font-variant: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]; font-feature-settings: normal | <feature-tag-value>; font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded; font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; font-style: normal | italic | oblique;
}You’ll see this plenty when looking at @font-face code generated by font services.
They are the gatekeepers!
That’s an analogy you can use to think about @font-face declaration blocks. The font will be downloaded and used, if it passes the gatekeepers.
The font-family is the obvious one. You’re declaring a new font-family to use, so any element that wants to use this font needs to have a matching one.
@font-face { /* Gatekeeper: font-family on another element must match this to be used. */ font-family: 'Open Sans'; src: url(my-font.woff2) format('woff2'); } body { /* Match! */ font-family: 'Open Sans';
} h1, h2 { /* No match */ font-family: 'Different Font';
}They are all gatekeepers
@font-face { /* Only download and use if element matches this font-family */ font-family: 'My Font'; /* Only download and use if element matches this font-style */ font-style: italic; /* Only download and use if element matches this font-weight */ font-weight: 700; src: url(my-bold-and-italic-font.woff2) format('woff2'); /* Only download and use if these characters are used */ unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}Maybe a diagram explanation will be helpful
More Reading
What’s the deal with declaring font properties on @font-face? is a post from CSS-Tricks
