Блог

Я знаю, что здесь есть много вопросов относительно загрузки шрифтов с использованием font face, однако я проверил их все (или, по крайней мере, многие из них), и, похоже, ничего не работает…

 @font-face {  
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U 000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-regular.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-regular.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U 000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-italic.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-italic.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U 000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-bold.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-bold.woff') format('woff');
}

@font-face {  
    font-family: 'Open Sans';
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U 000-5FF;
    src: local('Open Sans'),
    url('../../fonts/open-sans/open-sans-bold-italic.woff2') format('woff2'),
    url('../../fonts/open-sans/open-sans-bold-italic.woff') format('woff');
}
//End Open Sans
  

Затем я загружаю скрипт с помощью:

 wp_enqueue_style( 'font-open-sans', get_template_directory_uri().'/assets/scss/css/open-sans.css', false, NULL, 'all');
  

Консоль не выдает 404, и в исходном коде страницы я вижу, что файл css загружен правильно. Однако при попытке использования font-weight: bold; font-weight: 700; font-style: italic; ничего не происходит, оно просто остается нормальным.

Структура файла:

 - theme
    > assets
        > fonts
            > open-sans
                > open-sans-italic.woff
                > open-sans-italic.woff2
        > scss
            > css
                > open-sans.css
  

Обновить

После проверки вкладки стили инспектора я вижу, что строка вызывается, однако через нее проходит строка (но нигде не отображается до тех font: inherit пор, пока не появится код браузера по умолчанию.

Также следует отметить, что он правильно выделяется жирным шрифтом в Safari, но не в Chrome. Хотя оба показывают, что он зачеркнут.

Включение обоих типов файлов означает, что все браузеры могут использовать шрифт, если версия раньше, чем что-то вроде 2014. Мой chrome 80.0.3987.132, поэтому я знаю, что это не проблема с версией.

https://caniuse.com/?search=woff
https://caniuse.com/?search=woff2

Обновить

Проблема была исправлена путем удаления local('Open Sans')

Я проверил свой mac и обнаружил, что у меня установлено много TTF-файлов с именами, которые не совпадают. Я не буду отмечать ответ, поскольку не понимаю, почему это все еще не выделено жирным шрифтом для Chrome, но для Safari. Пожалуйста, кто-нибудь, кто знает об этом, не стесняйтесь подробно ответить, чтобы получить вознаграждение.

Обновить

Был предоставлен ответ, который означает, что локальное объявление может остаться!

Проблема, с которой вы столкнулись, заключается в том, что вы сказали ему искать один и тот же локальный файл шрифта вместо определения веса / стиля шрифта для каждого экземпляра.

Попробуйте добавить вес / стиль шрифта src: local , например:

 src: local('Open Sans 400'), //Regular
src: local('Open Sans 400i'), //Regular Italic
src: local('Open Sans 700'), //Bold
src: local('Open Sans 700i'), //Bold Italic
  

или, в качестве альтернативы, вы могли бы использовать:

 src: local('Open Sans'),
src: local('Open Sans Italic'),
src: local('Open Sans Bold'),
src: local('Open Sans Bold Italic'),