Как кроссбраузерно отобразить нестандартный(кастомный) шрифт в Canvas (проблема с Safari)?

Question

[vakolesnikov]

При загрузке страницы в сафари отображается стандартный шрифт в Canvas вместо желаемого.
Сам canvas рендерится посредством библиотеки pixi-fiber в React.

Для подключения шрифта использовано решение -

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; 
}

Работает во всех браузерах, кроме сафари.

Comments

[Антон Спирин]

Объявляете с весом 400, а используете с 700.

[vakolesnikov]

Антон Спирин, поправил вопрос

[Антон Спирин]

vakolesnikov, имя шрифта из нескольких слов правильно в кавычки заключать.
И что вам мешает проверить вкладки network и elements панели разработчика и посмотреть, что происходит?

[vakolesnikov]

Антон Спирин, В моем проекте div'ы с нужными шрифтами добавляются в js через цикл, там по коду все хорошо. Этот пример с вопросов Тостера скопировал, могут быть ошибки, приношу извинения, если ввел в заблуждение. В network шрифты есть, в elements тоже все присутствует. После reload страницы все работает (шрифты уже берутся из кэша, как я понял). Проблема именно в Сафари.

[Антон Спирин]

vakolesnikov, так в Safari и смотрите панель разработчика.

[vakolesnikov]

Антон Спирин, Да, смотрю в Safari

[Ankhena]

Какая версия Сафари?

[spnq]

У Safari есть проблемы с чтением шрифтов, которые не .woff. Попробуй сгенерировать через https://www.fontsquirrel.com/tools/webfont-generator

[vakolesnikov]

Ankhena, 12x. Тестировал также в 10x, 11x, с iOS, проблема на всех яблоках.

[vakolesnikov]

Константин Соколов, После релоада страницы шрифты отображаются верно, читает видимо правильно. По какой-то причине в момент именно первого рендера canvas элемента подтягивается стандартный шрифт.

Answer 1

[profesor08]

Генерируешь шрифт под все форматы, которые могут понимать браузеры (woff, otf, ttf и тд), для этого используй генератор. Сначала загружаешь шрифт, убеждаешься, что он загружен. Только потом начинаешь что-то рисовать. В коде тоже надо указать какой шрифт использовать.

Вот еще такой пример есть

Comments

[vakolesnikov]

Решил с помощью fontfaceobserver из примера в прикрепленной ссылке. Спасибо!