jgraph / jgraph/drawio

Unused Google Font stuck in document (secretly exported)

Open
#5,000 3 comments 0 reactions 1 assignee View on GitHub

@alderg is already working on this.

Since Jul 22, 2026.

Dominant language
JavaScript
Stars
8.2k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.