Предварительная загрузка ссылки не позволяет избежать дублирования загрузки шрифта.

Question

Я прочитал документацию по предварительной загрузке .В секции html head у меня есть

<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font">

. Позже я загружаю файл font.css, в который загружается точно такой же файл шрифта (отметьте url):

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Ошибка в Chrome?

Но консоль Chrome выдает предупреждение

Ресурс https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2 был предварительно загружен с использованием предварительной загрузки ссылки, но не использовался в течение несколькихсекунд от события загрузки окна.Пожалуйста, убедитесь, что оно имеет соответствующее значение as и преднамеренно загружено.

И действительно, браузер загружает один и тот же файл дважды (1-я и 3-я строки относятся к одному и тому же файлу)!

Как заставить предварительную загрузку работать, избегая дублирования загрузки файла?

Answer 1

Я решил проблему, добавив type="font/woff2" crossorigin="anonymous"

<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Шрифты действительно являются особым случаем

Если у вас есть CORS ваших сайтовнастройки сработали правильно, вы можете успешно предварительно загружать ресурсы кросс-источника, пока вы устанавливаете атрибут кросс-происхождения для вашего элемента.

Один интересный случай, в котором это применимо, даже если выборка не является кросс-источником, - это файлы шрифтов,По разным причинам их нужно извлекать с использованием CORS в анонимном режиме (см. Требования к выборке шрифтов, если вас интересуют все детали).