Font Loading behaving strangely with multiple fonts
heaversm opened this issue · 0 comments
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