0

due to the European GDPR Regulation I need to stop my theme loading fonts from Google and instead load them locally. I've downloaded all Fonts and placed the files in a fonts Directory. I added a @fontface rule in my CSS. (Please take a look below):

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/roboto-v30-latin-100.eot');
    /* IE9 Compat Modes */
    src: local('Roboto'),
        url('../fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/roboto-v30-latin-100.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/roboto-v30-latin-100.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/roboto-v30-latin-100.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/roboto-v30-latin-100.svg#Roboto') format('svg');
    /* Legacy iOS */
}

(I repeated this with all font-sizes)

Problem: The local fonts are not loaded. Is it because messed sth. up in the functions.php? I commented out certain parts in the functino.php. Please see below. Do I have to modify this in a certain way?

// 25.10.22
        
        // if(!isset($site_font['url'])){
        //  wp_enqueue_style("sth_GoogleFont","https://fonts.googleapis.com/css?family=Roboto+Condensed:400,100,200,300,500,600,700,800,900" , false, "1.0");       
        // }
        // else{
        //  $site_font_url = preg_replace("/^http:/i", "https:",$site_font['url']);
        //  wp_enqueue_style("sth_GoogleFont",$site_font_url , false, "1.0");
        // }

Thank you very much,

1 Answer 1

1

Most of the time when I have an issue with @font-face is because my src path isn't right. Maybe check the console to see if the call to your fonts files return a 404.

If your font-face is being called in the style.css in the root of your theme then your font path is more likely to be as follow:

url('./fonts/roboto-v30-latin-100.woff2') format('woff2')

../ means you go one back to the parent folder where ./ will look at the folder /fonts in your theme folder

@font-face being a css rule I don't think the function you commented out would have anything to do with the fonts not loading.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.