[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)