Как получить событие загрузки шрифта в react?

#reactjs #fonts #loading #react-state

Вопрос:

Я использую react. При использовании файла шрифта в src в React, как я могу изменить состояние, получив событие при загрузке шрифта?

Комментарии:

1. Почему вы хотите это сделать в первую очередь? Обычно вы просто используете веб-безопасные шрифты в качестве запасного варианта и автоматически переключаетесь на свои шрифты после их загрузки.

Ответ №1:

Вы можете использовать библиотеку Font Face Observer для загрузки и ожидания загрузки шрифта. Что вы можете сделать следующим образом:

 var font = new FontFaceObserver('My Family');

font.load().then(
  () => console.log('Font is available'),
  () => console.log('Font is not available')
);