diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
index e0c3b660..4b7e07b4 100644
--- a/apps/artboard/src/pages/artboard.tsx
+++ b/apps/artboard/src/pages/artboard.tsx
@@ -1,8 +1,8 @@
+import { isLocalFont } from "@reactive-resume/utils";
 import { useEffect, useMemo } from "react";
 import { Helmet } from "react-helmet-async";
 import { Outlet } from "react-router";
 import webfontloader from "webfontloader";
-import { isLocalFont } from "@reactive-resume/utils";
 
 import { useArtboardStore } from "../store/artboard";
 
@@ -21,11 +21,14 @@ export const ArtboardPage = () => {
   useEffect(() => {
     const family = metadata.typography.font.family;
     if (isLocalFont(family)) {
-      const width = window.document.body.offsetWidth;
-      const height = window.document.body.offsetHeight;
-      const message = { type: "PAGE_LOADED", payload: { width, height } };
-      window.postMessage(message, "*");
-      return;
+      let frame = 0;
+      frame = requestAnimationFrame(() => {
+        const width = window.document.body.offsetWidth;
+        const height = window.document.body.offsetHeight;
+        const message = { type: "PAGE_LOADED", payload: { width, height } };
+        window.postMessage(message, "*");
+      });
+      return () => { cancelAnimationFrame(frame); };
     }
 
     webfontloader.load({
diff --git a/libs/utils/src/namespaces/tests/fonts.test.ts b/libs/utils/src/namespaces/tests/fonts.test.ts
index ec1832e7..bf408afb 100644
--- a/libs/utils/src/namespaces/tests/fonts.test.ts
+++ b/libs/utils/src/namespaces/tests/fonts.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect,it } from "vitest";
+
 import { isLocalFont, localFonts } from "../fonts";
 
 describe("isLocalFont", () => {