@ font-face не работает в теме Wordpress - PullRequest
Новая
       3

@ font-face не работает в теме Wordpress

2 голосов
/ 07 декабря 2011

Я сейчас работаю над своим онлайн-портфолио .Как видите, @ font-face работает как шарм.Однако сейчас я преобразую этот статический HTML в динамическую тему Wordpress.Вот когда @ font-face перестает работать.Сначала я объясню, как я это сделал в статическом HTML / CSS.

Я установил шрифты в папку с именем «шрифты» в главном каталоге моего сайта (где сидит index.html).).С помощью следующего кода я объявляю шрифт вверху моего css-файла: 

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

Затем я вызываю шрифт с помощью font-family: MaidenOrange;в остальной части моего css-файла.

Когда я конвертировал это в Wordpress, я сначала скопировал и вставил всю мою таблицу стилей, и установил папку «шрифты», которую я создал в каталоге темы.Это не сработало (никогда не сработает в первый раз).Моя первая сессия Google создала у меня впечатление, что это связано с проблемой абсолютного пути и относительного пути.Поэтому я изменил объявление @ font-face в моей таблице стилей Wordpress Theme следующим образом: 

@font-face {
font-family: 'MaidenOrange';
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot');
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot?#iefix') format('embedded-opentype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.woff') format('woff'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.ttf') format('truetype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.svg#MaidenOrangeRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Это все еще не работает!Моя тема просто показывает Arial (это второй шрифт, который я передал в CSS).Я погуглил свою задницу, чтобы решить это, но я никуда не денусь.Любая помощь будет высоко ценится!

Ответы [ 2 ]

4 голосов
/ 07 декабря 2011

Возможно, я неправильно читаю то, что вы написали, но я не думаю, что у вас может быть php-код в вашем css-файле. Попробуйте переместить второй блок кода в файл header.php вашей темы, завернутый в теги <style>.

Кроме того, вы можете загрузить свою папку шрифтов в корень вашего сайта и использовать абсолютные пути к сайту, например, так: 

src: url('/fonts/MaidenOrange-webfont.eot');
1 голос
/ 07 декабря 2011

Вы не можете использовать теги PHP в файле CSS, если вы специально не настроили свой сервер, чтобы разрешить это.Отображение полученного результата style.css может помочь в дальнейшей диагностике, но я подозреваю, что это ваша проблема.

Относительные пути должны работать нормально, поэтому я сомневаюсь, что это ваша проблема, если вы не ошиблись в путях.1004 *

...