@ font-face werkt niet in Wordpress-thema

Ik ben momenteel bezig met mijn online portfolio . Zoals je ziet, loopt @ font-face als een charme. Ik converteer die statische HTML nu echter naar een dynamisch Wordpress-thema. Dit is wanneer @ font-face niet meer werkt. Ik zal eerst uitleggen hoe ik het heb gedaan in statische HTML/CSS.

Ik heb de lettertypen geïnstalleerd in een map met de naam "fonts" in de hoofddirectory van mijn website (waar index.html zit). Met de volgende code verklaar ik het lettertype bovenaan mijn css-bestand:

@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;
}

Dan noem ik het lettertype met font-family: MaidenOrange; in de rest van mijn CSS-bestand.

Toen ik dit naar Wordpress converteerde, kopieerde ik eerst mijn hele stylesheet en installeerde ik de map "fonts" die ik in de themamap heb gemaakt. Dat werkte niet (het doet nooit de eerste keer). Mijn eerste Google-sessie gaf me de indruk dat het te maken had met een absoluut pad versus relatief padprobleem. Dus veranderde ik de @ font-face-verklaring in mijn WordPress Themastijl naar het volgende:

@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;

}

Dat werkt nog steeds niet! Mijn thema toont gewoon Arial (wat het tweede lettertype is dat ik in de CSS heb doorgegeven). Ik heb me googled om dit op te lossen, maar ik kom nergens. Alle hulp zou zeer op prijs gesteld worden!

2

2 antwoord

Maybe I'm misreading what you wrote, but I don't think you can have PHP code in your CSS file. Try moving your second code block into your theme's header.php file, wrapped in