Font Loading behaving strangely with multiple fonts

[heaversm]

I don't believe font loading is happening properly.

I specify two fonts in my blotter script (ripple.js) as follows:

textOptions1 = {
      family: "'gtf_adieu_trialbold', serif",
      size: _width < 1000 ? 50 : _width < 1300 ? 75 : 90,
      fill: "#220032",
      paddingLeft: 20,
      paddingRight: 20,
    };
  
    textOptionsOutline1 = {
      family: "'gtf_adieu_trialbold-outline'",
      size: _width < 1000 ? 50 : _width < 1300 ? 75 : 90,
      fill: "#220032",
      paddingLeft: 20,
      paddingRight: 20,
    };

But when I attempt to use these fonts, only the solid, not outline fonts are visible:

I can change a completely unrelated part of my site's stylesheet (main.css), and then only the outline font shows, not the solid font.

So for example this class (which is not a blotter element:

.f__outline { font-family: 'gtf_adieu_trialbold-outline' } would show the solids and not the outline,
but this: .f__outline { font-family: 'gtf_adieu_trialbold-outline !important' } would show the outline not the solids.

But I can never get both fonts to show as they should (top and bottom lines solid, middle line outline.

Attaching my current script.
ripple.js.zip