Emile Bangma
2025-03-12 580c1bd608771efc15cf9cdf1784aba74ed83240
fix(typography): properly pass Google font options (#1825)

2 files modified
28 ■■■■ changed files
docs/configuration.md 22 ●●●●● patch | view | raw | blame | history
quartz/util/theme.ts 6 ●●●● patch | view | raw | blame | history
docs/configuration.md
@@ -108,3 +108,25 @@
You can see a list of all plugins and their configuration options [[tags/plugin|here]].
If you'd like to make your own plugins, see the [[making plugins|making custom plugins]] guide.
## Fonts
Fonts can be specified as a `string` or a `FontSpecification`:
```ts
// string
typography: {
  header: "Schibsted Grotesk",
  ...
}
// FontSpecification
typography: {
  header: {
    name: "Schibsted Grotesk",
    weights: [400, 700],
    includeItalic: true,
  },
  ...
}
```
quartz/util/theme.ts
@@ -105,9 +105,9 @@
  --highlight: ${theme.colors.lightMode.highlight};
  --textHighlight: ${theme.colors.lightMode.textHighlight};
  --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
  --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
  --codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
  --headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
  --bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
  --codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};
}
:root[saved-theme="dark"] {