Font isn't displaying correctly

[KevinMusgrave]

Here's what I have in excalidraw:

Here's what the final output of the animation looks like on https://dai-shi.github.io/excalidraw-animate/

The text in the animated version is not the hand-drawn style. I've tried it in Chrome and Firefox on Windows and MacOS.

[dai-shi]

I think Excalidraw changed something since they introduced new fonts.

This should be fixed in excalidraw-animate, but I don't have time for now.
If anyone is interested, please feel free to try fixing it.

[kei95]

It seems like all fonts exported in svgs are resulting in their default font, Segoe UI Emoji. I'd suspect the exportToSvg() from excalidraw package is the culprit as this application doesn't manually update font in text elements of the given svg.

I locally updated the package to the latest var (0.17.6) but the issue persisted. Another interesting behavior is that the font gets applied as expected when you load an old .excalidraw file. As @dai-shi has brought up, Excalidraw has made a change to introduce font picker and there's a high chance that any files after the version includes the change would result in current behavior of the app.

It could be an issue on Excalidraw's side rather than this app based on my little research. I'll try to post an issue in my spare time to their repo to see if I can get any insight from them.

examples:

when converting the .excalidraw file from months ago

when converting the .excalidraw file that I just created

[kei95]

With a little further research, it turned out that exportToSvg() was alright in the latest version of Excalidraw repo so it was due to a discrepancy between the app and package versions. The app contains all fonts updated with the exportToSvg() but the latest version of the package doesn't include any of these newly added fonts, thus resulting in this behavior.

I've opened a PR for patch up meanwhile we wait for their release. We can remove the change altogether once the package with the latest release gets made but my change would fill in the gap meanwhile.

[dai-shi]

#56 (comment)
@KevinMusgrave Please give it a try.

[KevinMusgrave]

Thanks for looking into this! Currently I get the following error in the console when I import a file that contains just a bit of text and nothing else:

useLoadSvg.ts:163 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fontFamily')
    at useLoadSvg.ts:163:44
    at NodeList.forEach (<anonymous>)
    at Cr (useLoadSvg.ts:162:32)
    at useLoadSvg.ts:78:11
    at f (regeneratorRuntime.js:44:17)
    at Generator.<anonymous> (regeneratorRuntime.js:125:22)
    at Generator.next (regeneratorRuntime.js:69:21)
    at c (asyncToGenerator.js:3:20)
    at a (asyncToGenerator.js:22:9)

[dai-shi]

@kei95 any thoughts?

[kei95]

@KevinMusgrave Hm I tried reproducing it in my env but couldn't. Would you mind sharing your .excalidraw file if it doesn't contain anything private? I have fixed crash bug but it'd result in a default font (the one in your screenshot of your description). I'm quite sure there's some edge case that I haven't captured originally, so I would appreciate it if you could provide me with some samples!

@dai-shi Please check out the fix and deploy it when you get a chance so that whoever has the same issue will be unblocked 🙏

[dai-shi]

Done.

[KevinMusgrave]

Thanks @kei95, it's working better, but there are some edge cases which I don't fully understand.

Here's my excalidraw drawing:

And here's the animation:

Screen.Recording.2024-08-20.at.12.56.33.PM.mov

Here's the excalidraw file:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "KuvBrMww7rh87OCem1SQ1",
      "type": "text",
      "x": 659.28515625,
      "y": 205.8828125,
      "width": 70.67996215820312,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a0",
      "roundness": null,
      "seed": 1982771912,
      "version": 27,
      "versionNonce": 623966904,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1724172745166,
      "link": null,
      "locked": false,
      "text": "Text A",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "center",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "Text A",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "text",
      "version": 55,
      "versionNonce": 1945222344,
      "index": "a1",
      "isDeleted": false,
      "id": "-hsNaSFsfLb9eQJPw3u1D",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 657.4298813045025,
      "y": 274.63671875,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "width": 72.37995910644531,
      "height": 25,
      "seed": 1545633480,
      "groupIds": [],
      "frameId": null,
      "roundness": null,
      "boundElements": [],
      "updated": 1724172711333,
      "link": null,
      "locked": false,
      "fontSize": 20,
      "fontFamily": 5,
      "text": "Text B",
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "Text B",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "S0-thRZjD6LwNqhUEjax7",
      "type": "text",
      "x": 661.33203125,
      "y": 357.22265625,
      "width": 69.73995971679688,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a2",
      "roundness": null,
      "seed": 2009318840,
      "version": 12,
      "versionNonce": 927859144,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1724172747953,
      "link": null,
      "locked": false,
      "text": "Text C",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "right",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "Text C",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "eby7JYZOQkhzKMFJ38USE",
      "type": "rectangle",
      "x": 849.46484375,
      "y": 192.31640625,
      "width": 181.48046875,
      "height": 85.5390625,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a6",
      "roundness": {
        "type": 3
      },
      "seed": 588569528,
      "version": 60,
      "versionNonce": 1418110648,
      "isDeleted": false,
      "boundElements": [
        {
          "type": "text",
          "id": "yWawggyMOn_m2o-WaoT0S"
        }
      ],
      "updated": 1724172815811,
      "link": null,
      "locked": false
    },
    {
      "id": "yWawggyMOn_m2o-WaoT0S",
      "type": "text",
      "x": 872.9051132202148,
      "y": 222.5859375,
      "width": 134.5999298095703,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a6V",
      "roundness": null,
      "seed": 827374024,
      "version": 29,
      "versionNonce": 1519764680,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1724172820421,
      "link": null,
      "locked": false,
      "text": "Text in a box",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "eby7JYZOQkhzKMFJ38USE",
      "originalText": "Text in a box",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "type": "rectangle",
      "version": 146,
      "versionNonce": 1413020600,
      "index": "a9",
      "isDeleted": false,
      "id": "-fJor1B3Lij-2Q8BaavMq",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 854.814453125,
      "y": 304.8671875,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "width": 181.48046875,
      "height": 85.5390625,
      "seed": 156211656,
      "groupIds": [],
      "frameId": null,
      "roundness": {
        "type": 3
      },
      "boundElements": [
        {
          "type": "text",
          "id": "40g2nAMS_Yxw1mqlgso3N"
        }
      ],
      "updated": 1724172830502,
      "link": null,
      "locked": false
    },
    {
      "type": "text",
      "version": 139,
      "versionNonce": 278717384,
      "index": "aA",
      "isDeleted": false,
      "id": "40g2nAMS_Yxw1mqlgso3N",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "angle": 0,
      "x": 860.8847351074219,
      "y": 322.63671875,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "width": 169.33990478515625,
      "height": 50,
      "seed": 1321803976,
      "groupIds": [],
      "frameId": null,
      "roundness": null,
      "boundElements": [],
      "updated": 1724172832715,
      "link": null,
      "locked": false,
      "fontSize": 20,
      "fontFamily": 5,
      "text": "Text in a colored\nbox",
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "-fJor1B3Lij-2Q8BaavMq",
      "originalText": "Text in a colored box",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "IUVhkWcqpUrE1qpFLy0a-",
      "type": "text",
      "x": 697.5349884033203,
      "y": 447.8046875,
      "width": 200.6798553466797,
      "height": 25,
      "angle": 0,
      "strokeColor": "#2f9e44",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aB",
      "roundness": null,
      "seed": 617136072,
      "version": 102,
      "versionNonce": 1213063096,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1724172867146,
      "link": null,
      "locked": false,
      "text": "A final piece of text",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "center",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "A final piece of text",
      "autoResize": true,
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "gridSize": 20,
    "gridStep": 5,
    "gridModeEnabled": false,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

[kei95]

@KevinMusgrave Thanks for the file! I was quite busy with my real-life situation so it took a bit to look into the issue, but I just pushed the fix to the branch so it shouldn't have a problem with the file anymore. The SVG converter function was acting interesting and I needed to change the way to check elements to apply the font. I just posted a gif in the PR so feel free to have a look into the updated version.

@dai-shi Please check the change and deploy it if it looks good!

#56 (comment)

[dai-shi]

@kei95 As we discussed, we should have an ultimate solution for this.
Just heard that excalidraw/excalidraw#8012 enabled embedding fonts. Does it help us at all?

@excalidraw/utils embeds the fonts as data urls for server-side usages (no need to fetch the font server-side while it works both in common js and esm)

[kei95]

@kei95 As we discussed, we should have an ultimate solution for this.
Just heard that excalidraw/excalidraw#8012 enabled embedding fonts. Does it help us at all?

@excalidraw/utils embeds the fonts as data urls for server-side usages (no need to fetch the font server-side while it works both in common js and esm)

Probably not for this particular issue. We need the excalidraw team to publish their new version of the package as it contains the changes to update logic around new fonts which ultimately caused this issue. I'll open an issue there to see if that helps so that we can get rid of the hack once for all!

[kei95]

Opened a discussion there. Let's hope that pushes their back toward the release 🙂