seek-oss / capsize

Flipping how we define typography in CSS.
https://seek-oss.github.io/capsize/
MIT License
1.51k stars 37 forks source link

createFontStack: Add original fallback name & quote in declaration #164

Closed michaeltaranto closed 8 months ago

michaeltaranto commented 8 months ago

Two improvements to createFontStack API:

createFontStack: Append original fallback font name to the font stack

The fontFamily returned from createFontStack now includes the original fallback font name(s). These are appended to the end of the font stack in the case the preferred font and generated fallbacks are not available.

import lobster from '@capsizecss/metrics/lobster';
import arial from '@capsizecss/metrics/arial';

const { fontFamily } = createFontStack([
  lobster,
  arial,
]);

Where fontFamily is now:

- `Lobster, 'Lobster Fallback: Arial'`
+ `Lobster, 'Lobster Fallback: Arial', Arial`

createFontStack: Quote font-family in @font-face declaration if needed

Previously, when using fontFaceFormat: 'styleObject', the generated fallback name was not quoted as necessary within the @font-face declaration. This could cause issues if the font family name contained spaces or other characters that required quoting.

changeset-bot[bot] commented 8 months ago

🦋 Changeset detected

Latest commit: 08826770fdb2a9175d7c3ac5f95003ebe0f2950c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | ---------------- | ----- | | @capsizecss/core | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR