Make sure the inline canvas uses the correct font (#3208)

mui · Feb 14, 2024 · d2a07fb · d2a07fb
1 parent 8c6aa54
commit d2a07fb
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHostInline.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHostInline.tsx
@@ -241,7 +241,21 @@ export default function EditorCanvasHost({
     <CanvasRoot className={className}>
       <CanvasFrame
         name="data-toolpad-canvas"
-        srcDoc={`<!DOCTYPE html><div id="root"></div>`}
+        srcDoc={`
+          <!doctype html>
+          <html lang="en">
+            <head>
+              <meta charset="UTF-8" />
+              <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+              />
+            </head>
+            <body className="notranslate">
+              <div id="root"></div>
+            </body>
+          </html>
+        `}
         onLoad={handleIframeLoad}
       />
       {page && portal