In theme.json, how to declare multiple related fonts using 1 variable font?

  • Resolved anonmeimei

    (@anonmeimei)


    1 year, 5 months ago

    So I have the variable font for Source Serif 4, and aside from the normal font, it also includes fonts in different optical sizes (Source Serif 4 Display, Source Serif 4 Subhead, Source Serif 4 Caption, etc.). These different fonts also come in different weights.

    I could declare these fonts and their font-weights separately using separate static fonts, but then the file size would be heavier than if I used just 1 all-encompassing variable font.

    What I want to achieve: Have separate font options in the Gutenberg font picker for each separate font included in the variable font. All fonts and font-weights are declared with 1 variable font.

    What I’ve done:

    I tried this code:

    "fontFace": [
{
“fontFamily”: “Source Serif 4”,
“fontStretch”: “normal”,
“fontStyle”: “normal”,
“fontWeight”: “400 500 600 700 800 900”,
“src”: [
“file:./assets/fonts/SourceSerif4/SourceSerif4Variable-Roman.otf.woff2”
]
}
]

    But all it does is show me one Source Serif 4 option (the normal one) in the Gutenberg font picker. I cannot pick between whether I want the Display, Subhead, Caption, etc. version. Font weights load just fine, though.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Check out this tutorial:
    https://fullsiteediting.com/lessons/theme-json-typography-font-styles/#h-font-weight

    I wrote something about theme.json as well but i don’t recommend following my advice.

    Thread Starter anonmeimei

    (@anonmeimei)

    @ajaxstardust I’ve been referring to that actually, but it says nothing about declaring different sub-fonts. Decided to just go the static route

    @anonmeimei using my example here (which is basically the same question as yours, above). While I received nothing useful in reply, you might take what I did (e.g. guessing at the font-weights / corresponding names), and use the following reference.

    • Thin: 100
    • Extra Light: 200
    • Light: 300
    • Regular: 400
    • Medium: 500
    • Semi Bold: 600
    • Bold: 700
    • Extra Bold: 800
    • Black: 900

    Stab at it with trial and error. Sadly, for a community based around software transitioning to a new framework, it seems no one cares to assist further. But why not get on board anyway!

    Personally I don’t have a reason to care about my experimentation down that path. I never did much more with it. Wish I had the definitive answer for you. I’ll play with it again some day. Play with it. Ask questions. Get bored and disappointed. It’s kind of sad, really.

    If nothing else, you might try participating in their Slack group. Good luck.

    • This reply was modified 1 year, 5 months ago by ajaxStardust.
    • This reply was modified 1 year, 5 months ago by ajaxStardust. Reason: embellishment
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘In theme.json, how to declare multiple related fonts using 1 variable font?’ is closed to new replies.