I am currently in the process of updating my online portfolio and have encountered an issue with @font-face. Initially, everything was working perfectly fine as I implemented it in static HTML. However, when converting the static HTML into a dynamic Wordpress theme, the @font-face functionality stopped working.
In the static version, I had placed the font files in a folder named "fonts" within the main directory where index.html is located. The font was declared at the beginning of the CSS file like this:
@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;
}
The font was then called using font-family: MaidenOrange; throughout the rest of the CSS file.
When transitioning to Wordpress, I copied the entire stylesheet and moved the "fonts" folder into the theme directory. However, this approach did not work initially, which led me to research and discover a possible issue with absolute vs. relative paths. As a result, I modified the @font-face declaration in the Wordpress Theme stylesheet as follows:
@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;
Unfortunately, even after making these adjustments, the issue persists and my theme continues to display Arial instead of the desired font. Despite extensive research efforts, I have yet to find a solution. Any assistance or guidance on this matter would be greatly appreciated!