background image quoted url

packages/font/src/font.spec.tsx

@@ -46,4 +46,24 @@ describe("<Font> component", () => {
     );
     expect(actualOutput).toMatchSnapshot();
   });
+
+  it("renders with quoted URLs and font names", async () => {
+    const webFont = {
+      url: '"http://example.com/font.woff"',
+      format: "woff",
+    } as const;
+
+    const html = await render(
+      <Font
+        fallbackFontFamily={["Helvetica Neue", "Arial"]}
+        fontFamily="My 'Custom' Font"
+        webFont={webFont}
+      />,
+    );
+
+    expect(html).toContain("font-family: 'My \\'Custom\\' Font';");
+    expect(html).toContain("Helvetica Neue, Arial");
+    expect(html).toContain('src: url("http://example.com/font.woff") format(\'woff\');');
+  });
+
 });

packages/font/src/font.tsx

@@ -48,27 +48,27 @@ export const Font: React.FC<Readonly<FontProps>> = ({
   fontWeight = 400,
 }) => {
   const src = webFont
-    ? `src: url(${webFont.url}) format('${webFont.format}');`
+    ? `src: url(${webFont.url.replace(/"/g, '\\"')}) format('${webFont.format}');`
     : "";
 
   const style = `
     @font-face {
-      font-family: '${fontFamily}';
+      font-family: '${fontFamily.replace(/'/g, "\\'")}';
       font-style: ${fontStyle};
       font-weight: ${fontWeight};
       mso-font-alt: '${
         Array.isArray(fallbackFontFamily)
-          ? fallbackFontFamily[0]
-          : fallbackFontFamily
+          ? fallbackFontFamily[0].replace(/'/g, "\\'")
+          : fallbackFontFamily.replace(/'/g, "\\'")
       }';
       ${src}
     }
 
     * {
-      font-family: '${fontFamily}', ${
+      font-family: '${fontFamily.replace(/'/g, "\\'")}', ${
         Array.isArray(fallbackFontFamily)
-          ? fallbackFontFamily.join(", ")
-          : fallbackFontFamily
+          ? fallbackFontFamily.map(font => font.replace(/'/g, "\\'")).join(", ")
+          : fallbackFontFamily.replace(/'/g, "\\'")
       };
     }
   `;