[bjensen_drParticipant]

I am trying to load a custom font with the @font-face technique but it isn’t working. I’ve tested out my approach on another WP install and it worked fine. Just wondering if there is something I should be doing while using the X theme.

I’ve located the font files here:
/wp-content/themes/x-child/fonts/

And called the font in the Customizer CSS area:

@font-face {
font-family: ‘bio_sansregular’;
src: url(‘fonts/biosans-regular-webfont.eot’);
src: url(‘fonts/biosans-regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/biosans-regular-webfont.woff2’) format(‘woff2’),
url(‘fonts/biosans-regular-webfont.woff’) format(‘woff’),
url(‘fonts/biosans-regular-webfont.ttf’) format(‘truetype’),
url(‘fonts/biosans-regular-webfont.svg#bio_sansregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.legalcopy{
font-size: 80%;
font-family: ‘bio_sansregular’ !important;
}

Any thoughts? I’ve tried absolute path and also tried putting it out in the directory with the style.css file but nothing is working. I’m testing it on this page. https://delta-risk.net/about/careers/ The class seems to be working fine but the font isn’t loading.

[JadeModerator]

Hi there,

Please try to update the code to:

@font-face {
    font-family: 'bio_sansregular';
    
    src: url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.eot');
    src: url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.woff2') format('woff2'),
         url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.woff') format('woff'),
         url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.ttf') format('truetype'),
         url('https://delta-risk.net/wp-content/themes/x-child/fonts/biosans-regular-webfont.svg#bio_sansregular') format('svg');

    font-weight: normal;
    font-style: normal;
}

Hope this helps.

[Author]

Posts