Waiting for font to load

GoJS
1

Here’s a complete stand-alone sample that waits for the Roboto Flex font to load before loading the model. I downloaded the font to a subdirectory – note the url(...) font source.

To demonstrate this, the TextBlock.font is set to “… robflex, serif”. This makes sure that TextBlocks using that font are sized correctly using that Roboto Flex font instead of the default serif font. The “robflex” font name is specified by the FontFace that was added to the document.fonts collection.

You’ll see that before the font is loaded that the node is using a serif font. Click the button and when the font load is done it loads the diagram’s model. Nodes then are rendered using the Roboto Flex font, which is sans-serif.

<!DOCTYPE html>
<html>
<head>
  <title>Simple loading of a font</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:500px; height:300px"></div>
  Before the Roboto Flex font is loaded, nodes will appear with a serif font.
  <div><button id="myTestButton">Load the font and then the diagram model</button></div>
  After clicking the button, nodes will appear with the Roboto Flex font.

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">

document.getElementById("myTestButton").addEventListener("click", e => {
  const robotoflex = new FontFace("robflex", "url(./Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf)");
  document.fonts.add(robotoflex);
  robotoflex.load().then(() => load());
});

const myDiagram =
  new go.Diagram("myDiagramDiv");

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.TextBlock({
          margin: 8,
          // NOTE: font defaults to a serif font until the Roboto Flex font is loaded
          font: "bold 14pt robflex, serif"
        })
        .bind("text")
    );

// show something initially, before the font is loaded
myDiagram.model = new go.GraphLinksModel([{ text: "Hello, world!" }]);

function load() {
  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, text: "Beta", color: "orange" },
    { key: 3, text: "Gamma", color: "lightgreen" },
    { key: 4, text: "Delta", color: "pink" }
  ],
  [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 2, to: 2 },
    { from: 3, to: 4 },
    { from: 4, to: 1 }
  ]);
}
  </script>
</body>
</html>