How to cross-browser display a non-standard (custom) font in Canvas (problem with Safari)?

Question

css

When loading a page in safari, the default font in Canvas is displayed instead of the desired one.
The canvas itself is rendered using the pixi-fiber library in React.
To connect the font, the solution was used -
HTML:

<div style="position: absolute; top:-10000px; left:-10000px">
    <div id="d1">.</div>
</div>

css:

@font-face{
    font-family: "Custom Font";
    src:url(...);
    url(...) format('...'),
    font-weight:400;
    font-style:normal
}

#d1 {
    font: 700 1px Custom Font;  
    position: absolute;
    color: #fff; 
}

Works in all browsers except safari.

Answer 1

You generate a font for all formats that browsers can understand (woff, otf, ttf, etc.), for this use a generator. First you load the font, make sure it's loaded. Only then do you start drawing. In the code, you also need to specify which font to use.
Here is another example