fix: Ensure fontFamily fallback (#446)

Closes #275.
vercel · Apr 14, 2023 · ac1b510 · ac1b510 · vercel · Apr 14, 2023
1 parent 9bbacbc
commit ac1b510
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/font.ts b/src/font.ts
@@ -170,11 +170,11 @@ export default class FontLoader {
     fontSize = 16,
     lineHeight = 1.2,
     {
-      fontFamily,
+      fontFamily = 'sans-serif',
       fontWeight = 400,
       fontStyle = 'normal',
     }: {
-      fontFamily: string | string[]
+      fontFamily?: string | string[]
       fontWeight?: Weight | WeightName
       fontStyle?: Style
     },

diff --git a/...-test-tsx-test-font-test-tsx-font-should-handle-font-family-fallback-1-snap.png b/...-test-tsx-test-font-test-tsx-font-should-handle-font-family-fallback-1-snap.png
diff --git a/test/font.test.tsx b/test/font.test.tsx
@@ -80,4 +80,35 @@ describe('Font', () => {
       expect(toImage(svg, 100)).toMatchImageSnapshot()
     })
   })
+
+  it('should handle font-family fallback', async () => {
+    const fontName = 'MontserratSubrayada'
+    const fontPath = join(
+      process.cwd(),
+      'test',
+      'assets',
+      `${fontName}-Regular.ttf`
+    )
+    const fontData = await readFile(fontPath)
+    const montserratFont = {
+      name: fontName,
+      data: fontData,
+    }
+    const svg = await satori(
+      <div
+        style={{
+          fontSize: '3rem',
+        }}
+      >
+        Hello
+      </div>,
+      {
+        width: 100,
+        height: 100,
+        fonts: [montserratFont],
+      }
+    )
+
+    expect(toImage(svg, 100)).toMatchImageSnapshot()
+  })
 })