Странное поведение фонта на канвасе

[Байт]

Вот такая проблемка. Есть специальный фонт со специальными символами. Он используется как в обычном тексте, так и при рисовании на canvas
Прописано
CSS:
@font-face {
font-family: ATM3;
src: url(./atm3.ttf);
}
Как будто все хорошо. Домашние испытание на OpenServer прошли успешно.
Но при переносе на хост начались чудеса. На стартовой странице в канвасе ИНОГДА вместо моего фонта используется один
из стандартных. Но при некоторых шевелениях (перезагрузка страницы, изменение данных, то есть когда канвас перерисовывается) используется мой. Не всегда. Случайный процесс. Закономерности уловить не удалось. Но в табличках на той же странице (там всегда фонт используется как текстовой с соответствующим прописыванием в css) всегда все хорошо. При этом таблички заполняются ДО рисования на канвасе.
Едем дальше. Другая страница сайта абсолютно идентично рисует на таком же канвасе. Просто той же функцией. И там ВСЕГДА все хорошо.

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

[Malleys]

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

А проблема на самом деле в полном отсутствии логики!

Сначало нужно загрузить шрифт, а затем нарисовать текст на холсте, используя шрифт! Логично? Если сделать в обратном порядке, то такое не будет работать!

@font-face не загружает шрифт, оно указывает откуда можно скачать шрифт, когда он понадобится! И соответственно, он понадобился тогда, когда вы стали рисовать текст на холсте, но шрифт ещё не загружен. Вы отрисовали текст, а затем асинхронно загрузился шрифт, но к тому времени он уже не нужен!

Вот что вам нужно сделать для того, чтобы нарисовать текст, используя определённый шрифт...

• Скачать шрифт (я для этого использую класс FontFace, соответственно мне нужно будет добавить шрифт в документ после загрузки шрифта)
• Затем нарисовать текст (после того, как шрифт добавлен в документ)

<canvas id="test"></canvas>
<script>

const canvas = document.getElementById("test")
const context = canvas.getContext("2d")
const fontFace = new FontFace("EKA", "url(https://cdn.glitch.com/348d485e-4ba6-4841-a41e-5865874b2d66%2FEKA-Absolution-Regular.ttf?v=1572113481005)")

fontFace.load().then(fontFace => {
	document.fonts.add(fontFace)

	context.font = "48px EKA"
	context.strokeText("Hello world!", 0, 100)
});

</script>

Возможно потом вы захотите шрифт удалить из документа используя метод delete у объекта document.fonts (это представитель класса FontFaceSet)

[Байт]

Malleys, спасибо! Завтра буду пробывать

[Байт]

Еще раз огромное спасибо! Кажется, все получилось. Кажется - потому что в этом мире трудно быть в чем-то уверенным до конца
Вот так

<script>
var fontFace = new FontFace("ATM3", "url(./atm3.ttf)", {});
...
 $.get(Cal, function(data) {  // Cal - строка обращения к серверу
   fontFace.load().then(function(loadedFace) {
     document.fonts.add(loadedFace);
     Stroi(data);  // Собственно рисование на канвасе
   });
 });

Что касается логики, да, не все понятно. Почему таблички все же рисовались с нужным фонтом? Значит, броузеру он уже был доступен?
Вообще хотелось бы понять логику, последовательность действий. Но в литературе, которая мне до сих пор попадалась только справочные матриалы, да советы - "Делай так!"