Repository navigation
Excalidraw diagrams, preview: text not rendered in virgil font #44
Description
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/excalidraw@0.15.3/dist/excalidraw-assets/Virgil.woff2");
}
@font-face {
font-family: "Cascadia";
src: url("https://unpkg.com/@excalidraw/excalidraw@0.15.3/dist/excalidraw-assets/Cascadia.woff2");
8000
}
</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": {}
}
Activity
gissehel commentedon Nov 6, 2023
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...
use object and not img to render svg #44