Добавить предварительную загрузку шрифтов в Wordpress

Question

С помощью узловых модулей я добавил этот файл в свою тему. Но это отображается в "Google Pagespeed Insight". Рассмотрите возможность использования <link rel=preload>для определения приоритета выборки ресурсов, которые в настоящее время запрашиваются позже при загрузке страницы.

В моем файле CSS он импортируется так.

@font-face {
  font-family: 'Graphik Web';
  src: local('Graphik Web'), url('#{$spirit-font-path}Graphik-Regular-Web.woff2') format('woff2'),
  url('#{$spirit-font-path}Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

Но все равно не работает, как в отчете Google Pagespeed Insight. Пожалуйста, дайте мне знать, если я что-то пропустил или что-то добавлю.

Answer 1

Чтобы избавиться от этой ошибки, вам нужно избавиться от @import (который здесь переводится как src url). Директива @import блокирует параллельные загрузки. Вы должны изменить код, чтобы импортировать woff в основной html с тегом ссылки.