Шрифты появляются на холсте только после их предыдущего использования на странице.

Я установил на страницу несколько шрифтов, например:

@font-face {
  font-family: Amsterdam Graffiti;
  src: url("./fonts/amsterdam.ttf");
}

, и шрифты хорошо отображаются на веб-странице.

Проблема в том, что на этой странице также есть холст, и когда я пишу на нем с установленными шрифтами, отображаются только те, которые используются на веб-странице (остальные заменяются системными шрифтами).

Пример: на этой следующей странице только 2 из 3 шрифтов будут работать на холсте.

JS:

window.onload = function(){
var fontprevcanvas = document.getElementById("fontprevcanvas");
var ctx = fontprevcanvas.getContext("2d");

ctx.font='28px Amsterdam Graffiti';
ctx.textAlign = "center"; 
ctx.fillText('test1', 40, 40);

ctx.font='28px Army Rust';
ctx.textAlign = "center"; 
ctx.fillText('test2', 40, 80);

ctx.font='28px Badaboom BB';
ctx.textAlign = "center"; 
ctx.fillText('test3', 40, 120);
};

CSS:

@font-face {
  font-family: Amsterdam Graffiti;
  src: url("./fonts/amsterdam.ttf");
}

@font-face {
  font-family: Army Rust;
  src: url('./fonts/ARMY RUST.ttf');
}

@font-face {
  font-family: Badaboom BB;
  src: url('./fonts/BADABB__.TTF');
}

HTML:

[113 ]

это результат:

Но тогда, если я использую 3-й шрифт в элементе страницы, он, наконец, появляется на холсте :

новый HTML:

part of the body
part of the body
part of the body

Результат:

В качестве обходного пути я Я использую шрифты в скрытых элементах страницы (они также не работают с display:none), например:

.
.
.
.
.
.
.
.
.
.

Но это не похоже на лучшую практику. Как я могу использовать установленные шрифты на холсте, не добавляя его в элементы моей веб-страницы?