Excalidraw diagrams, preview: text not rendered in virgil font

[deining]

By default, Excalidraw diagrams are rendered in Virgil font, this font is defined inside the SVG returned by kroki service:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.4166717529297 45" width="161.4166717529297" height="45">
  <!-- svg-source:excalidraw -->
  
  <defs>
    <style class="style-fonts">
      @font-face {
        font-family: "Virgil";
        src: url("https://unpkg.com/@excalidraw/[email protected]/dist/excalidraw-assets/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://unpkg.com/@excalidraw/[email protected]/dist/excalidraw-assets/Cascadia.woff2");
      }
    </style>
  </defs>

In the right preview pane, text inside Excalidraw diagrams is not rendered in Virgil Font.

Excalidraw source of a diagram that reveals the deficiency:

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "Yg0DY0CKfYkWhRoWGWAdX",
      "type": "text",
      "x": 755,
      "y": 291,
      "width": 141.4166717529297,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "roundness": null,
      "seed": 930373583,
      "version": 43,
      "versionNonce": 593511215,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1699117840578,
      "link": null,
      "locked": false,
      "text": "Niolesk is great!",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "top",
      "baseline": 18,
      "containerId": null,
      "originalText": "Niolesk is great!",
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

[gissehel]

Hello,

Indeed, I confirm the issue. It seems to be due to the fact that the font is an external resource, and for security reasons, the external resources are not loaded when used as an img tag.

There seems to be a workaround which is to use an object tag to embed the svg. But it has some downsides I'm currently struggling with...