Incorrect @font-face src in exported SVG file

[onlyice]

When I export the diagram as an SVG file, I noticed that the font is not displayed as expected. Upon opening the SVG file, the following content can be found:

<defs>
  <style class="style-fonts">
    @font-face {
      font-family: "Virgil";
      src: url("https://file%2B.vscode-resource.vscode-cdn.net/Users/kevin.lin/.vscode/extensions/pomdtr.excalidraw-editor-3.5.1/public//dist/excalidraw-assets/Virgil.woff2");
    }
    @font-face {
      font-family: "Cascadia";
      src: url("https://file%2B.vscode-resource.vscode-cdn.net/Users/kevin.lin/.vscode/extensions/pomdtr.excalidraw-editor-3.5.1/public//dist/excalidraw-assets/Cascadia.woff2");
    }
  </style>
</defs>

The URL is not accessible, which cause the unexpected font rendering. I believe it's caused by commit 1b149a44115.

[pomdtr]

You're suspicion is right. Fixing this requires some change on excalidraw side, I'll contact the excalidraw team

[HyunggyuJang]

Any update?

[mwopfner]

I think it is till an open issue in excalidraw: https://github.com/excalidraw/excalidraw/issues/7543

[karlhorky]

@pomdtr a new font picker has been published in https://github.com/excalidraw/excalidraw/pull/8012 (along with font embedding) - does that change anything for implementing in the Excalidraw VS Code extension?

[pomdtr]

yeah it might be worth revisiting this issue :)

[karlhorky]

@pomdtr looks like this problem should go away with the new versions, because of the inlined data URI from the font:

karlhorky: how easy would it be to fix font paths for "self-hosted" Excalidraw?

Mrazator: Since the fonts are now inlined as dataurl, this and related issues with incorrect font paths in SVGs should disappear. Recently we've also shipped glyph subsetting (excalidraw/excalidraw#8300), which keeps the data URL as small as possible (containing only glyphs for the used codepoints).

• https://github.com/excalidraw/excalidraw/issues/7543#issuecomment-2382586190

[pomdtr]

I tried to update the extension to the latest package pre-release yesterday, but I did run into some build errors.

Feel free to take a stab at it, it might be time to finally move to vite instead of create-react-app.

[pomdtr]

Ok the last version of the excalidraw package seems to be broken:

• there is a missing lodash dependency in the package.json
• assets are not fetched correctly from unpkg
• even after fixing both issues, I'm still not able to view the canvas (and no error to investigate in the console)

I spent enough time on this already, I'll just wait until a new stable release is available.