diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx index bf7a7093..4b7e07b4 100644 --- a/apps/artboard/src/pages/artboard.tsx +++ b/apps/artboard/src/pages/artboard.tsx @@ -1,3 +1,4 @@ +import { isLocalFont } from "@reactive-resume/utils"; import { useEffect, useMemo } from "react"; import { Helmet } from "react-helmet-async"; import { Outlet } from "react-router"; @@ -18,6 +19,18 @@ export const ArtboardPage = () => { }, [metadata.typography.font]); useEffect(() => { + const family = metadata.typography.font.family; + if (isLocalFont(family)) { + 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({ google: { families: [fontString] }, active: () => { diff --git a/libs/utils/src/namespaces/fonts.ts b/libs/utils/src/namespaces/fonts.ts index 939d2257..4af07c5b 100644 --- a/libs/utils/src/namespaces/fonts.ts +++ b/libs/utils/src/namespaces/fonts.ts @@ -6,6 +6,21 @@ export type Font = { files: Record; }; +/** + * Known system fonts we consider available locally without fetching from Google Fonts. + * Extend this list when adding more system-safe families to the app. + */ +export const localFonts = ["Arial", "Cambria", "Garamond", "Times New Roman"]; + +/** + * Checks whether a font family is a local/system font. + * + * Input: font family name (case-insensitive) + * Output: true if present in localFonts, otherwise false + */ +export const isLocalFont = (family: string): boolean => + localFonts.some((f) => f.toLowerCase() === family.toLowerCase()); + export const fonts: Font[] = [ { family: "Roboto", diff --git a/libs/utils/src/namespaces/tests/fonts.test.ts b/libs/utils/src/namespaces/tests/fonts.test.ts new file mode 100644 index 00000000..58970feb --- /dev/null +++ b/libs/utils/src/namespaces/tests/fonts.test.ts @@ -0,0 +1,25 @@ +import { describe, expect, it } from "vitest"; + +import { isLocalFont, localFonts } from "../fonts"; + +describe("isLocalFont", () => { + it("returns true for known local fonts (case-insensitive)", () => { + expect(isLocalFont("Arial")).toBe(true); + expect(isLocalFont("arial")).toBe(true); + expect(isLocalFont("Times New Roman")).toBe(true); + expect(isLocalFont("times new roman")).toBe(true); + }); + + it("returns false for non-local fonts", () => { + expect(isLocalFont("Roboto")).toBe(false); + expect(isLocalFont("Open Sans")).toBe(false); + }); +}); + +describe("localFonts", () => { + it("includes the expected base set", () => { + for (const f of ["Arial", "Cambria", "Garamond", "Times New Roman"]) { + expect(localFonts).toContain(f); + } + }); +});