Я предварительно загружаю шрифт, используя HTML-тег <link> с атрибутом rel, установленным для предварительной загрузки, как показано во фрагменте ниже;
<link rel="preload" href="fonts/32ADEO.woff2" as="font" type="font/woff2">
Хотя это работает, как и ожидалось, при загрузке гарнитуры, она загружается снова.
На скриншоте вкладки сети в браузере Google Chrome дважды показана загрузка шрифта - см. Ниже;
Кроме того, я получаю следующее предупреждение на вкладке консоли браузера Google Chrome;
Ресурс https://example.com/new-v8/fonts/32A0E0.woff2 был предварительно загружен с использованием предварительной загрузки ссылки, но не использовался в течение нескольких секунд после события загрузки окна. Пожалуйста, убедитесь, что это. Пожалуйста, убедитесь, что оно имеет соответствующее значение "как" и преднамеренно загружено.
Что я делаю не так и как я могу это исправить?
Ваш preload-Tag принимает аргумент "crossorigin", который должен быть указан для Webfonts, даже если они находятся на том же хосте, что и ваш веб-сайт.
См. Https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Cross-origin_fetches или https://www.smashingmagazine.com/2016/02/preload-what-is-it-good -for/# ранняя загрузка шрифтов.