Unused Google Font stuck in document (secretly exported)

[Krinkle]

Preflight Checklist

• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.
• I tested the problem in private mode: yes.

Describe the bug

Once a Google Font is used, it seems to remain stuck in the document, even though there now zero references to it.

To Reproduce
Steps to reproduce the behavior:

1. Create new blank document, save to Google Drive.
2. Create text node (defaults to Helvetica).
3. Change font family to Google Font "Lato".
4. Change font family back to Helvetia, or e.g. to custom name "Arial".

Step 1 (SVG):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1px" height="1px" viewBox="-0.5 -0.5 1 1"><defs/><rect fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));" width="100%" height="100%" x="0" y="0"/><g><g data-cell-id="0"><g data-cell-id="1"/></g></g></svg>

Step 2 (Edit Diagram):

<mxGraphModel dx="948" dy="646" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1200" pageHeight="900" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="8V6-nBAysxFlgcf5m5Yr-1" value="Test" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
      <mxGeometry x="450" y="320" width="60" height="30" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

Step 3 (Edit Diagram):

<mxGraphModel dx="948" dy="646" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1200" pageHeight="900" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="8V6-nBAysxFlgcf5m5Yr-1" value="Test" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Lato;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLato;" vertex="1" parent="1">
      <mxGeometry x="450" y="320" width="60" height="30" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

Step 3 (SVG): Note the expected use of @import url(https://fonts.googleapis.com/css2?family=Lato

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="60px" height="30px" viewBox="-0.5 -0.5 60 30"><defs><style type="text/css">@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;500);&#xa;</style></defs><rect fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));" width="100%" height="100%" x="0" y="0"/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="8V6-nBAysxFlgcf5m5Yr-1"><g><rect x="0" y="0" width="60" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 15px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 12px; font-family: &quot;Lato&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Test</div></div></div></foreignObject><text x="30" y="19" fill="light-dark(#000000, #ffffff)" font-family="&quot;Lato&quot;" font-size="12px" text-anchor="middle">Test</text></switch></g></g></g></g></g></g></svg>

Step 4 (Edit Diagram):

<mxGraphModel dx="948" dy="646" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1200" pageHeight="900" math="0" shadow="0">
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />
    <mxCell id="8V6-nBAysxFlgcf5m5Yr-1" value="Test" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;" vertex="1" parent="1">
      <mxGeometry x="450" y="320" width="60" height="30" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

Step 4 S(VG): Note the unexpected use of the same import, despite no reference to "Lato".

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff; background-color: light-dark(#ffffff, var(--ge-dark-color, #121212)); color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="60px" height="30px" viewBox="-0.5 -0.5 60 30"><defs><style type="text/css">@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;500);&#xa;</style></defs><rect fill="#ffffff" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212));" width="100%" height="100%" x="0" y="0"/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="8V6-nBAysxFlgcf5m5Yr-1"><g><rect x="0" y="0" width="60" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 15px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: light-dark(#000000, #ffffff); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Test</div></div></div></foreignObject><text x="30" y="19" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Test</text></switch></g></g></g></g></g></g></svg>

Expected behavior

• I expect exported SVGs to only establish connections to third-party domains like fonts.googleapis.com if the diagram actually makes reference to one of its fonts.
• I expect SVGs to only import fonts for font families that are used by exported nodes (e.g. selection, diagram, pages, whatever the export is for).
• I expect there to either not be any hidden/secret place that tracks used fonts, or for this to automatically remove unused fonts, or for this mechanism to be inspectable as part of the Drawio XML format.

Versions:

• Draw.io v26.1.3 on diagrams.net
• Firefox, latest stable
• macOS, latest stable

Additional context

I have tried numerous workarounds to try and "reset" this secret cache. But, even after these steps, the SVG export still contains the same @import fonts.googleapis.com.

• Cross out the unused font from the font dropdown menu of recently used fonts.
• "Make a Copy...".
• Create a new Page, select all on Page 1, copy, paste on Page 2, delete Page 1.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. See the FAQ for more information.

[alderg]

Should be fixed.