Strange behaviour in using imported font

GoJS
1

I’m using bowtie font in GoJS, I imported the font using the font face in css as you can see here:

@font-face {
  font-family: "Bowtie";
  src: local("Bowtie"), url("./fonts/Bowtie.eot");
  src: local("Bowtie"),
    url("./fonts/Bowtie.eot?#iefix") format("embedded-opentype"),
    url("./fonts/Bowtie.woff2") format("woff2"),
    url("./fonts/Bowtie.ttf") format("truetype"),
    url("./fonts/Bowtie.woff") format("woff"),
    url("./fonts/Bowtie.svg#Bowtie") format("svg");
  font-weight: normal;
  font-style: normal;
}

.bowtie-alert {
  content: "\e600";
}
.bowtie-approve {
  content: "\e601";
}
.bowtie-approve-disapprove {
  content: "\e602";
}

I used the solution found here and I created an adornment menu with a textblock like this one

$(go.TextBlock, {
        text: "\ue669",
        font: "14px Bowtie",
        stroke: "#fff",
        desiredSize: new go.Size(16, 16),
      })

in particular using the define builder like this

const makeGObject = function(name) {
  return $(go.TextBlock, {
    text: "\ue669",
    font: "14px Bowtie",
    stroke: "#fff",
    desiredSize: new go.Size(16, 16),
  })
}

go.GraphObject.defineBuilder("ButtonWithoutHighlight", function(args) {
  const { name } = args[1]

  let button = $("Button", makeGObject(name))

  let border = button.findObject("ButtonBorder")
  if (border instanceof go.Shape) {
    border.stroke = null
    border.fill = "transparent"
  }

  button.mouseEnter = function(e, button, prev) {
    let shape = button.findObject("ButtonBorder")
    if (shape instanceof go.Shape) {
      border.stroke = null
      border.fill = "transparent"
    }
  }

  button.mouseLeave = function(e, button, prev) {
    let shape = button.findObject("ButtonBorder")
    if (shape instanceof go.Shape) {
      border.stroke = null
      border.fill = "transparent"
    }
  }

  return button
})

The result is very strange, because when I click the first time on my entity the adornment menu appears like that

First

then if I dismiss the menu and I click again or if I resize the window the menu appears like that

Second

What can I do?
Thanks

2

Which browser are you using?

It is probably a font-loading bug, which can be fixed if you use something to detect when the font is loaded, and then re-draw the diagram once loaded (using myDiagram.redraw(), a method that shouldn’t be used often because it is not efficient, but will ensure correct drawing once everything’s loaded)

3

I’m using Chrome - Version 68.0.3440.106 (Official Build) (64-bit)
I try what you suggested.

4

I found that the best solution it was to hide an <i> element with an icon and in that way the font is loaded correctly.
This isn’t an elegant solution, but I fixed the problem with a line of code instead of using the tricky CSS font loading api.

Thanks