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" />

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


wordpress php fonts css font-face
person Mike.Whitehead    schedule 16.10.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

/ в начале означает, что он ищет шрифт в корневом веб-каталоге.

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

src: url('fonts/Gotham-Light.otf') format('opentype');
person FluffyKitten    schedule 16.10.2017
comment
шрифты - это не подпапка style.css, разве это нужно? Кроме того, папка шрифтов не отображается на моей панели ›Внешний вид› Редактор, так ведь? (Это определенно в нужной папке тем. - person Mike.Whitehead; 16.10.2017
comment
@ Mike.Whitehead нет, это не обязательно должно быть во вложенной папке, но вам нужно указать путь к тому месту, где он находится в вашем CSS! В своем вопросе вы сказали, что шрифты находятся в папке шрифтов вашей дочерней темы ... так где же ваш стиль, если его нет в папке дочерней темы? - person FluffyKitten; 16.10.2017
comment
Я думал, вы имели в виду шрифты как подпапку в папке CSS - извините. Ваш ответ заставил все работать - спасибо. Теперь мне просто нужно, чтобы мой javascript работал, ха-ха :) - person Mike.Whitehead; 16.10.2017
comment
@ Mike.Whitehead Рад помочь :) - person FluffyKitten; 16.10.2017

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

Это должно сработать, просто поместите шрифт в папку с именем 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;

}

person DaFois    schedule 16.10.2017
comment
Большое спасибо. Значит, это должен быть абсолютный URL? В целях разработки мне нужно поставить localhost: 8888? - person Mike.Whitehead; 16.10.2017
comment
Думаю, для этого можно использовать <?php echo 'http://' .$_SERVER['HTTP_HOST']; ?>, но не в файле css;) - person DaFois; 16.10.2017