WordPress — добавление собственного шрифта через font-face

Question

WordPress — добавление собственного шрифта через font-face

Я создал интерфейсный сайт, который сейчас загружаю в WordPress, используя тему html5blank. Я никогда не загружал пользовательский файл шрифта раньше, и я думаю, что я получаю неправильный путь к файлу.
Файлы шрифтов находятся в папке шрифтов в папке моей дочерней темы. Вот как у меня есть мой код —

style.css

@font-face {
font-family: 'Gotham-Light';
src: url('/fonts/Gotham-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;

}

Я также положил это в свой header.php (не уверен, что это требуется) —

 <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" />

Как мне показать правильный путь, если проблема именно в этом? Может ли оно быть относительным или оно должно быть абсолютным?

1

css font-face fonts php wordpress

Решение

Другие решения

Вам нужен адрес файла шрифта, а не таблицы стилей.

 <link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />

1

Это должно работать, просто поместите шрифт в папку с именем fonts в каталоге вашей темы.

@font-face {
font-family: 'gothamlight';
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf);
font-weight: normal;
font-style: normal;

}

0

Источник

Accepted Answer

Вы используете абсолютный путь в своем @ font-face здесь:

src: url('/fonts/Gotham-Light.otf') format('opentype');

/ в начале означает, что он ищет шрифт в webroot.

Предполагая, что ваш style.css находится в папке вашей дочерней темы и fonts является подпапкой этого, попробуйте это (то есть без / в начале):

src: url('fonts/Gotham-Light.otf') format('opentype');

3