diff --git a/packages/fonts/src/__snapshots__/get-font-faces.test.ts.snap b/packages/fonts/src/__snapshots__/get-font-faces.test.ts.snap new file mode 100644 index 0000000000..74717e4639 --- /dev/null +++ b/packages/fonts/src/__snapshots__/get-font-faces.test.ts.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`getFontFaces() same family, but different formats 1`] = ` +Array [ + Object { + "fontDisplay": "swap", + "fontFamily": "Roboto, sans-serif", + "fontStyle": "normal", + "fontWeight": 400, + "src": "url('/fonts/roboto.woff') format('woff'), url('/fonts/roboto.ttf') format('truetype')", + }, +] +`; diff --git a/packages/fonts/src/get-font-faces.test.ts b/packages/fonts/src/get-font-faces.test.ts index 4754f50315..8cd5ef4ae4 100644 --- a/packages/fonts/src/get-font-faces.test.ts +++ b/packages/fonts/src/get-font-faces.test.ts @@ -22,16 +22,6 @@ describe("getFontFaces()", () => { path: "/fonts/roboto.ttf", }, ]; - expect(getFontFaces(assets)).toMatchInlineSnapshot(` -[ - { - "fontDisplay": "swap", - "fontFamily": "Roboto", - "fontStyle": "normal", - "fontWeight": 400, - "src": "url('/fonts/roboto.woff') format('woff'), url('/fonts/roboto.ttf') format('truetype')", - }, -] -`); + expect(getFontFaces(assets)).toMatchSnapshot(); }); }); diff --git a/packages/fonts/src/get-font-faces.ts b/packages/fonts/src/get-font-faces.ts index ac53182921..d8902f52e2 100644 --- a/packages/fonts/src/get-font-faces.ts +++ b/packages/fonts/src/get-font-faces.ts @@ -1,4 +1,4 @@ -import { FONT_FORMATS } from "./constants"; +import { FONT_FORMATS, DEFAULT_FONT_FALLBACK } from "./constants"; import type { FontMeta } from "./schema"; import type { FontFormat } from "./types"; @@ -16,7 +16,7 @@ export const getFontFaces = (assets: Array) => { if (face === undefined) { faces.set(asset.meta.family, { - fontFamily: asset.meta.family, + fontFamily: `${asset.meta.family}, ${DEFAULT_FONT_FALLBACK}`, fontStyle: asset.meta.style, fontWeight: asset.meta.weight, fontDisplay: "swap" as const,