Звездный рейтинг для WooCommerce не отображается на Chrome

Question

Я использую WordPress WooCommerce, и этот файл woocommerce / assets / css / _fonts.scss имеет этот код.

@font-face {
    font-family: 'star';
    src: url('../fonts/star.eot');
    src: url('../fonts/star.eot?#iefix') format('embedded-opentype'),
        url('../fonts/star.woff') format('woff'),
        url('../fonts/star.ttf') format('truetype'),
        url('../fonts/star.svg#star') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WooCommerce';
    src: url('../fonts/WooCommerce.eot');
    src: url('../fonts/WooCommerce.eot?#iefix') format('embedded-opentype'),
        url('../fonts/WooCommerce.woff') format('woff'),
        url('../fonts/WooCommerce.ttf') format('truetype'),
        url('../fonts/WooCommerce.svg#WooCommerce') format('svg');
    font-weight: normal;
    font-style: normal;
}

HTML выглядит так

<div class="star-rating">
   <span style="width:100%">Rated 
   <strong class="rating">5.00</strong> out of 5</span>
</div>

У меня есть все файлы шрифтов тоже.Он отлично работает на Firefox, но на Chrome это показывает некоторые странные символы?Любая идея, как это исправить?

шрифт css здесь

ОБНОВЛЕНИЕ:

Я заметил эти ошибки на Chrome

Доступ к шрифту в 'https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff' из источника' https: MY_URL 'заблокирован политикой CORS: заголовок' Access-Control-Allow-Origin 'содержит несколько значений' *, ', но разрешен только один.(индекс): 571 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.woff net :: ERR_FAILED (индекс): 1 Доступ к шрифту в 'https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf' из источника' https: MY_URL 'был заблокирован политикой CORS: доступ'Заголовок Control-Allow-Origin 'содержит несколько значений' , * ', но допускается только одно.(индекс): 657 GET https://bla.stackpathcdn.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf net :: ERR_FAILED

Answer 1

Получилось, я отключил заголовки CORS на stackpathcdn, и я преобразовал woff в woff2 и изменил css на это.

@font-face {
    font-family: 'star';
    src: url('../fonts/star.eot');
    src: url('../fonts/star.eot?#iefix') format('embedded-opentype'),
      url('../fonts/star.woff2') format('woff2'),
        url('../fonts/star.woff') format('woff'),
        url('../fonts/star.ttf') format('truetype'),
        url('../fonts/star.svg#star') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WooCommerce';
    src: url('../fonts/WooCommerce.eot');
    src: url('../fonts/WooCommerce.eot?#iefix') format('embedded-opentype'),
      url('../fonts/WooCommerce.woff2') format('woff2'),
        url('../fonts/WooCommerce.woff') format('woff'),
        url('../fonts/WooCommerce.ttf') format('truetype'),
        url('../fonts/WooCommerce.svg#WooCommerce') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Я думаю, что вам нужно конвертировать ваши шрифты в woff2, в моем случае это сработало, по-видимому, у chrome могут быть проблемы с различными форматами /