How do I specify multiple base fonts in typography?

[yo5uke]

Hello, I am a Quarto user and greatly appreciate the functionality of the brand.yml.

As a Japanese user, I often need to specify separate base fonts for Japanese and English text.

Is it possible to specify multiple fonts as the base font in the current configuration? If so, could you guide me on how to set this up?

Thank you in advance!

[gadenbuie]

Right now you can provide multiple fonts in typography.fonts and they'll all be loaded or made available (eg in the website or app), but you have to pick one font to be used as the base font.

Can you provide an example where you've done something like this? It'd be helpful to have a concrete example as we consider how to m handles this with brand.yml.

[yo5uke]

Thank you for your response.

Currently, the typography section in brand.yml looks like this:

typography:
  fonts:
    - family: Zen Maru Gothic
      source: google
    - family: Commissioner
      source: google
    - family: Fira Code
      source: google
  base: Zen Maru Gothic
  monospace: Fira Code

However, since only one base font can be specified, I often end up configuring it in the SCSS file as follows:

/*-- scss.defaults --*/

@import url(https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap);
@import url(https://fonts.googleapis.com/css?family=Commissioner&display=swap);
@import url(https://fonts.googleapis.com/css?family=Fira+Code&display=swap);

$font-family-jp: "Zen Maru Gothic" !default;
$font-family-base: "Commissioner", $font-family-jp !default;

$font-family-sans-serif: $font-family-base !default;
$font-family-monospace: "Fira Code", $font-family-jp !default;

I hope this helps clarify my use case. Please let me know if you need further details.

[gadenbuie]

Thanks! This might get you close:

typography:
  fonts:
    - family: Zen Maru Gothic
      source: google
    - family: Commissioner
      source: google
    - family: Fira Code
      source: google
  base: "Commissioner, Zen Maru Gothic"
  monospace: "Fira Code, Zen Maru Gothic"

defaults:
  bootstrap:
    defaults:
      font-family-jp: Zen Maru Gothic

Note that typography.fonts loads the fonts into the page, so typography.base (or more specifically typography.base.family) can use any of the fonts. typography.base.family is directly mapped to the CSS font-family property for base fonts (or equivalent in other formats).

[gadenbuie]

It turns out you could even do this

typography:
  fonts:
    - family: Zen Maru Gothic
      source: google
    - family: Commissioner
      source: google
    - family: Fira Code
      source: google
  base: "Commissioner, $font-family-jp"
  monospace: "Fira Code, $font-family-jp"

defaults:
  bootstrap:
    defaults:
      font-family-jp: Zen Maru Gothic

but I wouldn't recommend that because it assumes your output is web-based (where Sass is available).

[yo5uke]

Thank you for your detailed response and suggestions.

However, I tried the configuration you suggested, but unfortunately, it didn’t work as expected.

First, here is my brand.yml configuration:

typography:
  fonts:
    - family: Zen Maru Gothic
      source: google
    - family: Commissioner
      source: google
    - family: Fira Code
      source: google
  base: "Commissioner, Zen Maru Gothic"
  monospace: "Fira Code, Zen Maru Gothic"

defaults:
  bootstrap:
    defaults:
      font-family-jp: Zen Maru Gothic

And the output result was as follows:

However, neither Commissioner nor Zen Maru Gothic seems to be applied as expected in the output.

When using the SCSS configuration I shared earlier instead of brand.yml, the output appears as follows:

For reference, I am currently using Quarto version 1.6.40.

I would greatly appreciate any additional insights or suggestions on how to resolve this issue. Thank you for your continued support!

[gadenbuie]

I believe this is a Quarto issue where the fonts in brand.typography.fonts are only added to the website if they appear in one of the family properties in typography. I opened a new issue in Quarto: quarto-dev/quarto-cli#11929

[yo5uke]

Thank you for your help and for opening a new issue in Quarto.