feat(fonts): allow PageTitle to have its own font subset

[felixnie]

Subsetting fonts based on characters in pageTitle, so that we can have better branding without overloading unnecessary fonts.

Tested:

• cdnCaching: false
• cdnCaching: true
• FontSpecification with name, weights, and italics, as mentioned in fix(typography): properly pass Google font options #1825

Demo:

https://draftz.felixnie.com/

[jackyzha0]

can you make title optional and just edit googleFontHref to optionally include that font if title is defined instead of making a new googleSubFontHref func

[felixnie]

It can be done using one single googleFontHref function.
However, to retrieve a font subset, we have to call it twice as the &text=${textSet} in the URL will apply to all font families.

googleFontHref will ask users to explicitly indicate the types of fonts they want.

If the title is not defined, it falls back to DEFAULT_SANS_SERIF as the header and body do.

TBD:

Some might apply googleFontHref(theme, types, text) to a large amount of text. Then googleFontHref will spend some time finding unique characters. Putting await on it will make things less straightforward. I'm new to this. Maybe I should leave this to hard-core users.

[jackyzha0]

ah didnt notice the &text specifier, in that case lets just use the old 2 function approach

my only change request is to make the title param optional and default it to header

[felixnie]

googleFontHref(theme, text): string[] now returns one or multiple URLs in an Array. This is to adaptively decide whether to include the (subset) font for the title.

For example, when the title is undefined or manually set to be the same as the header, fetching a subset again is unnecessary.

Title font should have identical formatFontSpecification output with the header to be considered as 'the same'.

For backward compatibility, title can be:

1. missing in config
2. ""
3. undefined

And the header font will be applied instead.

[jackyzha0]

can we use the two function approach in the first few commits?

[felixnie]

Sure. Do you have any further ideas about this?

[jackyzha0]

exclude the subset if title font is not explicitly defined (as it will just use header anyways)

[felixnie]

To be consistent I added if-logic to both Head.tsx and componentResources.ts. Pls check the latest commit.

[jackyzha0]

final nit: lets remove this in the actual config, i like our existing header font

[felixnie]

Sure. Default config restored.

For the header font to apply, title can be:

1. absent in config
2. ""
3. undefined

[jackyzha0]

awesome thanks! last thing, can you update the doc page for configuration? https://quartz.jzhao.xyz/configuration

[felixnie]

awesome thanks! last thing, can you update the doc page for configuration? https://quartz.jzhao.xyz/configuration

Okay! And there are some minor changes in formatting.

[jackyzha0]

lgtm, just make sure you run npm run format so that the linter is happy

[felixnie]

Ahh, no wonder the check keeps failing. Thanks.