I hope you read that title out loud in your best Seinfeld impression.

Arecent 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

What’s the deal with declaring font properties on @font-face?
A diagram showing HTML, the CSS selectors that match that HTML, and the @font-face declration blocks that ulitmately apply.

More Reading