fix

.github/workflows/size-limit.yml

@@ -3,6 +3,10 @@ on:
   pull_request:
     branches:
       - master
+
+permissions:
+  pull-requests: read
+
 jobs:
   size:
     runs-on: ubuntu-latest

dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx

@@ -10,13 +10,13 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";
 
 `FONT_FAMILY` contains all the font families used in `Excalidraw` as explained below
 
-| Font Family  | Description                                 |
+| Font Family | Description            |
-| ------------ | ------------------------------------------- |
+| ----------- | ---------------------- |
-| `HAND_DRAWN` | The handwritten font (by default, `Virgil`) |
+| `Virgil`    | The `handwritten` font |
-| `NORMAL`     | The regular font (by default, `Helvetica`)  |
+| `Helvetica` | The `Normal` Font      |
-| `CODE`       | The code font (by default, `Cascadia`)      |
+| `Cascadia`  | The `Code` Font        |
 
-Defaults to `HAND_DRAWN` unless passed in `initialData.appState.currentItemFontFamily`.
+Defaults to `FONT_FAMILY.Virgil` unless passed in `initialData.appState.currentItemFontFamily`.
 
 ### THEME
 

src/actions/actionBoundText.tsx

@@ -10,7 +10,6 @@ import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
-  getFontString,
   measureText,
   redrawTextBoundingBox,
 } from "../element/textElement";
@@ -32,6 +31,7 @@ import {
 } from "../element/types";
 import { AppState } from "../types";
 import { Mutable } from "../utility-types";
+import { getFontString } from "../utils";
 import { register } from "./register";
 
 export const actionUnbindText = register({

src/actions/actionProperties.tsx

@@ -74,7 +74,7 @@ import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
-  FontFamilyId,
+  FontFamilyValues,
   TextAlign,
   VerticalAlign,
 } from "../element/types";
@@ -689,22 +689,22 @@ export const actionChangeFontFamily = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => {
     const options: {
-      value: FontFamilyId;
+      value: FontFamilyValues;
       text: string;
       icon: JSX.Element;
     }[] = [
       {
-        value: FONT_FAMILY.HAND_DRAWN.fontFamilyId,
+        value: FONT_FAMILY.Virgil,
         text: t("labels.handDrawn"),
         icon: FreedrawIcon,
       },
       {
-        value: FONT_FAMILY.NORMAL.fontFamilyId,
+        value: FONT_FAMILY.Helvetica,
         text: t("labels.normal"),
         icon: FontFamilyNormalIcon,
       },
       {
-        value: FONT_FAMILY.CODE.fontFamilyId,
+        value: FONT_FAMILY.Cascadia,
         text: t("labels.code"),
         icon: FontFamilyCodeIcon,
       },
@@ -713,7 +713,7 @@ export const actionChangeFontFamily = register({
     return (
       <fieldset>
         <legend>{t("labels.fontFamily")}</legend>
-        <ButtonIconSelect<FontFamilyId | false>
+        <ButtonIconSelect<FontFamilyValues | false>
           group="font-family"
           options={options}
           value={getFormValue(

src/components/App.tsx

@@ -231,6 +231,7 @@ import {
 import {
   debounce,
   distance,
+  getFontString,
   getNearestScrollableContainer,
   isInputLike,
   isToolIcon,
@@ -297,7 +298,6 @@ import {
   getContainerCenter,
   getContainerElement,
   getDefaultLineHeight,
-  getFontString,
   getLineHeightInPx,
   getTextBindableContainerAtPosition,
   isMeasureTextSupported,

src/components/canvases/StaticCanvas.tsx

@@ -37,10 +37,25 @@ const StaticCanvas = (props: StaticCanvasProps) => {
       canvas.classList.add("excalidraw__canvas", "static");
     }
 
-    canvas.style.width = `${props.appState.width}px`;
+    const widthString = `${props.appState.width}px`;
-    canvas.style.height = `${props.appState.height}px`;
+    const heightString = `${props.appState.height}px`;
-    canvas.width = props.appState.width * props.scale;
+    if (canvas.style.width !== widthString) {
-    canvas.height = props.appState.height * props.scale;
+      canvas.style.width = widthString;
+    }
+    if (canvas.style.height !== heightString) {
+      canvas.style.height = heightString;
+    }
+
+    const scaledWidth = props.appState.width * props.scale;
+    const scaledHeight = props.appState.height * props.scale;
+    // setting width/height resets the canvas even if dimensions not changed,
+    // which would cause flicker when we skip frame (due to throttling)
+    if (canvas.width !== scaledWidth) {
+      canvas.width = scaledWidth;
+    }
+    if (canvas.height !== scaledHeight) {
+      canvas.height = scaledHeight;
+    }
 
     renderStaticScene(
       {

src/constants.ts

@@ -1,6 +1,6 @@
 import cssVariables from "./css/variables.module.scss";
 import { AppProps } from "./types";
-import { ExcalidrawElement, FontFamilyId } from "./element/types";
+import { ExcalidrawElement, FontFamilyValues } from "./element/types";
 import { COLOR_PALETTE } from "./colors";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
@@ -94,19 +94,10 @@ export const CLASSES = {
 
 // 1-based in case we ever do `if(element.fontFamily)`
 export const FONT_FAMILY = {
-  HAND_DRAWN: {
+  Virgil: 1,
-    fontFamilyId: 1,
+  Helvetica: 2,
-    fontFamily: "Virgil",
+  Cascadia: 3,
-  },
+};
-  NORMAL: {
-    fontFamilyId: 2,
-    fontFamily: "Helvetica",
-  },
-  CODE: {
-    fontFamilyId: 3,
-    fontFamily: "Cascadia",
-  },
-} as const;
 
 export const THEME = {
   LIGHT: "light",
@@ -128,8 +119,7 @@ export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY: FontFamilyId =
+export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Virgil;
-  FONT_FAMILY.HAND_DRAWN.fontFamilyId;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";

src/data/restore.ts

@@ -2,6 +2,7 @@ import {
   ExcalidrawElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
+  FontFamilyValues,
   PointBinding,
   StrokeRoundness,
 } from "../element/types";
@@ -21,9 +22,11 @@ import {
 import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
+  DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_VERTICAL_ALIGN,
   PRECEDING_ELEMENT_KEY,
+  FONT_FAMILY,
   ROUNDNESS,
   DEFAULT_SIDEBAR,
   DEFAULT_ELEMENT_PROPS,
@@ -31,14 +34,12 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
   detectLineHeight,
   getDefaultLineHeight,
-  getFontFamilyIdByName,
-  getFontString,
   measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";
@@ -74,6 +75,15 @@ export type RestoredDataState = {
   files: BinaryFiles;
 };
 
+const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
+  if (Object.keys(FONT_FAMILY).includes(fontFamilyName)) {
+    return FONT_FAMILY[
+      fontFamilyName as keyof typeof FONT_FAMILY
+    ] as FontFamilyValues;
+  }
+  return DEFAULT_FONT_FAMILY;
+};
+
 const repairBinding = (binding: PointBinding | null) => {
   if (!binding) {
     return null;
@@ -176,7 +186,7 @@ const restoreElement = (
           element as any
         ).font.split(" ");
         fontSize = parseFloat(fontPx);
-        fontFamily = getFontFamilyIdByName(_fontFamily);
+        fontFamily = getFontFamilyByName(_fontFamily);
       }
       const text = element.text ?? "";
 

src/data/transform.ts

@@ -17,7 +17,6 @@ import {
 } from "../element/newElement";
 import {
   getDefaultLineHeight,
-  getFontString,
   measureText,
   normalizeText,
 } from "../element/textElement";
@@ -34,12 +33,12 @@ import {
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FileId,
-  FontFamilyId,
+  FontFamilyValues,
   TextAlign,
   VerticalAlign,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
-import { assertNever } from "../utils";
+import { assertNever, getFontString } from "../utils";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -48,7 +47,7 @@ export type ValidLinearElement = {
   label?: {
     text: string;
     fontSize?: number;
-    fontFamily?: FontFamilyId;
+    fontFamily?: FontFamilyValues;
     textAlign?: TextAlign;
     verticalAlign?: VerticalAlign;
   } & MarkOptional<ElementConstructorOpts, "x" | "y">;
@@ -125,7 +124,7 @@ export type ValidContainer =
       label?: {
         text: string;
         fontSize?: number;
-        fontFamily?: FontFamilyId;
+        fontFamily?: FontFamilyValues;
         textAlign?: TextAlign;
         verticalAlign?: VerticalAlign;
       } & MarkOptional<ElementConstructorOpts, "x" | "y">;

src/element/embeddable.ts

@@ -2,9 +2,9 @@ import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import { t } from "../i18n";
 import { ExcalidrawProps } from "../types";
-import { setCursorForShape, updateActiveTool } from "../utils";
+import { getFontString, setCursorForShape, updateActiveTool } from "../utils";
 import { newTextElement } from "./newElement";
-import { getContainerElement, getFontString, wrapText } from "./textElement";
+import { getContainerElement, wrapText } from "./textElement";
 import { isEmbeddableElement } from "./typeChecks";
 import {
   ExcalidrawElement,
@@ -218,7 +218,7 @@ export const createPlaceholderEmbeddableLabel = (
     Math.min(element.width / 2, element.width / text.length),
     element.width / 30,
   );
-  const fontFamily = FONT_FAMILY.NORMAL.fontFamilyId;
+  const fontFamily = FONT_FAMILY.Helvetica;
 
   const fontString = getFontString({
     fontSize,

src/element/newElement.test.ts

@@ -79,7 +79,7 @@ describe("duplicating single elements", () => {
       opacity: 100,
       text: "hello",
       fontSize: 20,
-      fontFamily: FONT_FAMILY.HAND_DRAWN.fontFamilyId,
+      fontFamily: FONT_FAMILY.Virgil,
       textAlign: "left",
       verticalAlign: "top",
     });

src/element/newElement.ts

@@ -10,12 +10,17 @@ import {
   VerticalAlign,
   Arrowhead,
   ExcalidrawFreeDrawElement,
-  FontFamilyId,
+  FontFamilyValues,
   ExcalidrawTextContainer,
   ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
 } from "../element/types";
-import { arrayToMap, getUpdatedTimestamp, isTestEnv } from "../utils";
+import {
+  arrayToMap,
+  getFontString,
+  getUpdatedTimestamp,
+  isTestEnv,
+} from "../utils";
 import { randomInteger, randomId } from "../random";
 import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -30,7 +35,6 @@ import {
   wrapText,
   getBoundTextMaxWidth,
   getDefaultLineHeight,
-  getFontString,
 } from "./textElement";
 import {
   DEFAULT_ELEMENT_PROPS,
@@ -180,7 +184,7 @@ export const newTextElement = (
   opts: {
     text: string;
     fontSize?: number;
-    fontFamily?: FontFamilyId;
+    fontFamily?: FontFamilyValues;
     textAlign?: TextAlign;
     verticalAlign?: VerticalAlign;
     containerId?: ExcalidrawTextContainer["id"] | null;

src/element/resizeElements.ts

@@ -34,6 +34,7 @@ import {
   isTextElement,
 } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
+import { getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import {
   TransformHandleType,
@@ -52,7 +53,6 @@ import {
   getApproxMinLineHeight,
   measureText,
   getBoundTextMaxHeight,
-  getFontString,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 

src/element/textElement.test.ts

@@ -427,6 +427,6 @@ describe("Test getDefaultLineHeight", () => {
   });
 
   it("should return correct line height", () => {
-    expect(getDefaultLineHeight(FONT_FAMILY.CODE.fontFamilyId)).toBe(1.2);
+    expect(getDefaultLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
   });
 });

src/element/textElement.ts

@@ -1,10 +1,10 @@
-import { arrayToMap, isTestEnv } from "../utils";
+import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
   ExcalidrawElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
-  FontFamilyId,
+  FontFamilyValues,
   FontString,
   NonDeletedExcalidrawElement,
 } from "./types";
@@ -19,7 +19,6 @@ import {
   isSafari,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-  WINDOWS_EMOJI_FALLBACK_FONT,
 } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
@@ -968,57 +967,17 @@ export const isMeasureTextSupported = () => {
 const DEFAULT_LINE_HEIGHT = {
   // ~1.25 is the average for Virgil in WebKit and Blink.
   // Gecko (FF) uses ~1.28.
-  [FONT_FAMILY.HAND_DRAWN.fontFamilyId]:
+  [FONT_FAMILY.Virgil]: 1.25 as ExcalidrawTextElement["lineHeight"],
-    1.25 as ExcalidrawTextElement["lineHeight"],
   // ~1.15 is the average for Virgil in WebKit and Blink.
   // Gecko if all over the place.
-  [FONT_FAMILY.NORMAL.fontFamilyId]:
+  [FONT_FAMILY.Helvetica]: 1.15 as ExcalidrawTextElement["lineHeight"],
-    1.15 as ExcalidrawTextElement["lineHeight"],
   // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too
-  [FONT_FAMILY.CODE.fontFamilyId]: 1.2 as ExcalidrawTextElement["lineHeight"],
+  [FONT_FAMILY.Cascadia]: 1.2 as ExcalidrawTextElement["lineHeight"],
 };
 
-export const getDefaultLineHeight = (fontId: number) => {
+export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
-  if (fontId in DEFAULT_LINE_HEIGHT) {
+  if (fontFamily in DEFAULT_LINE_HEIGHT) {
-    return (
+    return DEFAULT_LINE_HEIGHT[fontFamily];
-      DEFAULT_LINE_HEIGHT as Record<number, ExcalidrawTextElement["lineHeight"]>
-    )[fontId];
   }
   return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
 };
-
-export const getFontFamilyIdByName = (fontFamilyName: string): FontFamilyId => {
-  for (const key in FONT_FAMILY) {
-    const font = FONT_FAMILY[key as keyof typeof FONT_FAMILY];
-    if (font.fontFamily === fontFamilyName) {
-      return font.fontFamilyId;
-    }
-  }
-  return DEFAULT_FONT_FAMILY;
-};
-
-export const getFontFamilyString = ({
-  fontFamily,
-}: {
-  fontFamily: FontFamilyId;
-}) => {
-  for (const key in FONT_FAMILY) {
-    const font = FONT_FAMILY[key as keyof typeof FONT_FAMILY];
-    if (font.fontFamilyId === fontFamily) {
-      return `${font.fontFamily}, ${WINDOWS_EMOJI_FALLBACK_FONT}`;
-    }
-  }
-
-  return WINDOWS_EMOJI_FALLBACK_FONT;
-};
-
-/** returns fontSize+fontFamily string for assignment to DOM elements */
-export const getFontString = ({
-  fontSize,
-  fontFamily,
-}: {
-  fontSize: number;
-  fontFamily: FontFamilyId;
-}) => {
-  return `${fontSize}px ${getFontFamilyString({ fontFamily })}` as FontString;
-};

src/element/textWysiwyg.test.tsx

@@ -798,7 +798,7 @@ describe("textWysiwyg", () => {
       await new Promise((r) => setTimeout(r, 0));
       updateTextEditor(editor, "Hello World!");
       editor.blur();
-      expect(text.fontFamily).toEqual(FONT_FAMILY.HAND_DRAWN.fontFamilyId);
+      expect(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
       UI.clickTool("text");
 
       mouse.clickAt(
@@ -815,7 +815,7 @@ describe("textWysiwyg", () => {
       editor.blur();
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.CODE.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Cascadia);
 
       //undo
       Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -823,7 +823,7 @@ describe("textWysiwyg", () => {
       });
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.HAND_DRAWN.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Virgil);
 
       //redo
       Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
@@ -831,7 +831,7 @@ describe("textWysiwyg", () => {
       });
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.CODE.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Cascadia);
     });
 
     it("should wrap text and vertcially center align once text submitted", async () => {
@@ -1220,7 +1220,7 @@ describe("textWysiwyg", () => {
 
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.CODE.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Cascadia);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
       fireEvent.click(screen.getByTitle(/Very large/i));
@@ -1247,7 +1247,7 @@ describe("textWysiwyg", () => {
       fireEvent.click(screen.getByTitle(/code/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.CODE.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Cascadia);
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
       ).toEqual(1.2);
@@ -1255,7 +1255,7 @@ describe("textWysiwyg", () => {
       fireEvent.click(screen.getByTitle(/normal/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.NORMAL.fontFamilyId);
+      ).toEqual(FONT_FAMILY.Helvetica);
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
       ).toEqual(1.15);

src/element/textWysiwyg.tsx

@@ -1,5 +1,10 @@
 import { CODES, KEYS } from "../keys";
-import { isWritableElement, isTestEnv } from "../utils";
+import {
+  isWritableElement,
+  getFontString,
+  getFontFamilyString,
+  isTestEnv,
+} from "../utils";
 import Scene from "../scene/Scene";
 import {
   isArrowElement,
@@ -29,8 +34,6 @@ import {
   computeContainerDimensionForBoundText,
   detectLineHeight,
   computeBoundTextPosition,
-  getFontString,
-  getFontFamilyString,
 } from "./textElement";
 import {
   actionDecreaseFontSize,

src/element/types.ts

@@ -10,8 +10,8 @@ import { MarkNonNullable, ValueOf } from "../utility-types";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
-export type FontFamilyId =
+export type FontFamilyKeys = keyof typeof FONT_FAMILY;
-  typeof FONT_FAMILY[keyof typeof FONT_FAMILY]["fontFamilyId"];
+export type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
 export type Theme = typeof THEME[keyof typeof THEME];
 export type FontString = string & { _brand: "fontString" };
 export type GroupId = string;
@@ -150,7 +150,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
   Readonly<{
     type: "text";
     fontSize: number;
-    fontFamily: FontFamilyId;
+    fontFamily: FontFamilyValues;
     text: string;
     baseline: number;
     textAlign: TextAlign;

src/packages/excalidraw/example/initialData.tsx

@@ -1,6 +1,5 @@
 import { ExcalidrawElementSkeleton } from "../../../data/transform";
 import { FileId } from "../../../element/types";
-import { FONT_FAMILY } from "../entry";
 
 const elements: ExcalidrawElementSkeleton[] = [
   {
@@ -40,10 +39,7 @@ const elements: ExcalidrawElementSkeleton[] = [
 ];
 export default {
   elements,
-  appState: {
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
-    viewBackgroundColor: "#AFEEEE",
-    currentItemFontFamily: FONT_FAMILY.HAND_DRAWN.fontFamilyId,
-  },
   scrollToContent: true,
   libraryItems: [
     [

src/renderer/renderElement.ts

@@ -20,7 +20,7 @@ import type { Drawable } from "roughjs/bin/core";
 import type { RoughSVG } from "roughjs/bin/svg";
 
 import { StaticCanvasRenderConfig } from "../scene/types";
-import { distance, isRTL } from "../utils";
+import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
 import {
@@ -46,8 +46,6 @@ import {
   getLineHeightInPx,
   getBoundTextMaxHeight,
   getBoundTextMaxWidth,
-  getFontFamilyString,
-  getFontString,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {

src/renderer/renderScene.ts

@@ -934,10 +934,8 @@ const _renderStaticScene = ({
     strokeGrid(
       context,
       appState.gridSize,
-      -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize +
+      appState.scrollX,
-        (appState.scrollX % appState.gridSize),
+      appState.scrollY,
-      -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize +
-        (appState.scrollY % appState.gridSize),
       appState.zoom,
       normalizedWidth / appState.zoom.value,
       normalizedHeight / appState.zoom.value,

src/scene/Fonts.ts

@@ -1,8 +1,8 @@
 import { isTextElement, refreshTextDimensions } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import { getFontString } from "../element/textElement";
 import { isBoundToContainer } from "../element/typeChecks";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import { getFontString } from "../utils";
 import type Scene from "./Scene";
 import { ShapeCache } from "./ShapeCache";
 

src/tests/data/restore.test.ts

@@ -58,7 +58,7 @@ describe("restoreElements", () => {
     const textElement = API.createElement({
       type: "text",
       fontSize: 14,
-      fontFamily: FONT_FAMILY.HAND_DRAWN.fontFamilyId,
+      fontFamily: FONT_FAMILY.Virgil,
       text: "text",
       textAlign: "center",
       verticalAlign: "middle",

src/tests/regressionTests.test.tsx

@@ -666,13 +666,9 @@ describe("regression tests", () => {
 
   it("updates fontSize & fontFamily appState", () => {
     UI.clickTool("text");
-    expect(h.state.currentItemFontFamily).toEqual(
+    expect(h.state.currentItemFontFamily).toEqual(FONT_FAMILY.Virgil);
-      FONT_FAMILY.HAND_DRAWN.fontFamilyId,
-    );
     fireEvent.click(screen.getByTitle(/code/i));
-    expect(h.state.currentItemFontFamily).toEqual(
+    expect(h.state.currentItemFontFamily).toEqual(FONT_FAMILY.Cascadia);
-      FONT_FAMILY.CODE.fontFamilyId,
-    );
   });
 
   it("deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element", () => {

src/types.ts

@@ -10,7 +10,7 @@ import {
   ExcalidrawBindableElement,
   Arrowhead,
   ChartType,
-  FontFamilyId,
+  FontFamilyValues,
   FileId,
   ExcalidrawImageElement,
   Theme,
@@ -221,7 +221,7 @@ export type AppState = {
   currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
   currentItemRoughness: number;
   currentItemOpacity: number;
-  currentItemFontFamily: FontFamilyId;
+  currentItemFontFamily: FontFamilyValues;
   currentItemFontSize: number;
   currentItemTextAlign: TextAlign;
   currentItemStartArrowhead: Arrowhead | null;

src/utils.ts

@@ -4,11 +4,17 @@ import {
   CURSOR_TYPE,
   DEFAULT_VERSION,
   EVENT,
+  FONT_FAMILY,
   isDarwin,
   MIME_TYPES,
   THEME,
+  WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
-import { NonDeletedExcalidrawElement } from "./element/types";
+import {
+  FontFamilyValues,
+  FontString,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
 import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { SHAPES } from "./shapes";
@@ -79,6 +85,30 @@ export const isWritableElement = (
   (target instanceof HTMLInputElement &&
     (target.type === "text" || target.type === "number"));
 
+export const getFontFamilyString = ({
+  fontFamily,
+}: {
+  fontFamily: FontFamilyValues;
+}) => {
+  for (const [fontFamilyString, id] of Object.entries(FONT_FAMILY)) {
+    if (id === fontFamily) {
+      return `${fontFamilyString}, ${WINDOWS_EMOJI_FALLBACK_FONT}`;
+    }
+  }
+  return WINDOWS_EMOJI_FALLBACK_FONT;
+};
+
+/** returns fontSize+fontFamily string for assignment to DOM elements */
+export const getFontString = ({
+  fontSize,
+  fontFamily,
+}: {
+  fontSize: number;
+  fontFamily: FontFamilyValues;
+}) => {
+  return `${fontSize}px ${getFontFamilyString({ fontFamily })}` as FontString;
+};
+
 export const debounce = <T extends any[]>(
   fn: (...args: T) => void,
   timeout: number,