GO JS and Fabric UI Font

GoJS
1

In my application, I am using Fabric UI to display other information. Using same font size , color for text block shows different presentation - as shown below

    $(go.TextBlock,
      { stroke:"#605E5C", name: 'TextBlock', font: '12px "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif"',   click:this.onNodeTextClick},

(Font information of Fabric UI extracted from the setting option of browser)

image
image1076×585 23 KB

Also when doing the scroll, some font flicker happens ( may be due to not assinging the
-webkit-font-smoothing: antialiased setting). How to resolve same ??

2

The rendering of text to a Canvas element is different from the rendering of text in HTML.

Can you wait with initializing the diagram until the font(s) are loaded?

3

Font seems loaded properly.

  1. Main issue is font is of not same size. I tried by increasing it 14px, 15px but not match with UI of other component. Even 20px not work.

  2. Flicker - is not exactly flickering. But smoothness of text disabled at the time of scrolling for a 1-2 seconds… Not a major i guess now but needs to get resolved.

4

No, if you use the debug library go-debug.js or go-debug-module.js, I get this error:

Uncaught Error: Not a valid font: "12px "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif""

If I just specify:

$(go.TextBlock,
  {
    font: "12px Segoe UI, sans-serif",
    . . .
  })

it seems to work well and look good.
image