Font from Local SydneyChild theme

Hello

I am having some problems with activating fonts from my local server, in my Child theme. I am a begginer at wordress websites and coding overall. I have build a website and used the google fonts from internet. But due the compliance with the GDPR regulation, I would like to have my fonts taken from my localserver.

I downloaded some fonts from google fonts, Ubuntu, Kodchasan and PoiretOne.

I have put the code in my Child theme Editor style.css like so:

    /* fonts:
    ================================================================================= */
     
    /* ubuntu light */
     
     @font-face {
        font-family: 'Ubuntu-Light';
        src: url('fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype');
    }

    /* ubuntu regular */
     
     @font-face {
        font-family: 'Ubuntu-Regular';
        src: url('fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
    }

    /* ubuntu medium */
     
     @font-face {
        font-family: 'Ubuntu-Medium';
        src: url('fonts/Ubuntu/Ubuntu-Medium.ttf') format('truetype');
    }

    /* ubuntu bold */
     
     @font-face {
        font-family: 'Ubuntu-Bold';
        src: url('fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype');
    }

    /* kodchasan light */
     
     @font-face {
        font-family: 'Kodchasan-Light';
        src: url('fonts/Kodchasan/Kodchasan-Light.ttf') format('truetype');
    }

    /* kodchasan regular */
     
     @font-face {
        font-family: 'Kodchasan-Regular';
        src: url('fonts/Kodchasan/Kodchasan-Regular.ttf') format('truetype');
    }

    /* kodchasan medium */
     
     @font-face {
        font-family: 'Kodchasan-Medium';
        src: url('fonts/Kodchasan/Kodchasan-Medium.ttf') format('truetype');
    }

    /* kodchasan bold */
     
     @font-face {
        font-family: 'Kodchasan-Bold';
        src: url('fonts/Kodchasan/Kodchasan-Bold.ttf') format('truetype');
    }

    /* kodchasan semi bold */
     
     @font-face {
        font-family: 'Kodchasan-SemiBold';
        src: url('fonts/Kodchasan/Kodchasan-SemiBold.ttf') format('truetype');
    }

    /* poiret_one regular */
     
     @font-face {
        font-family: 'PoiretOne-Regular';
        src: url('fonts/Poiret_One/PoiretOne-Regular.ttf') format('truetype');
    }

    h1, .menu-item a, .sub-menu a {
    	font-family: 'Kodchasan-Bold', sans-serif !important;
    }

    h2 {
    	font-family: 'Kodchasan-SemiBold', sans-serif !important;
    }

    h3, #mainnav ul.menu > li.menu-item, #top .sub-menu, .sub-menu, .sub-menu *, #mainnav .sub-menu li a {
    	font-family: 'Ubuntu-Medium', sans-serif !important;
    }

    h4 {
    	font-family: 'PoiretOne-Regular', cursive !important;
    }

    body {
    	font-family: 'Ubuntu-Medium', sans-serif !important;
    }

When i go to my multi lingual website and edit my site in Elementor, I change the HTML Tag to H2, but I do not see that the fonts changed to Custom, they are still from the Google fonts.

I would like the fonts to auto change to Custom font from my local place (and not the Google fonts) when I make it a H1, H2, H3 etc. tag.

Hello there,

Do you have the folder hierarchy and font file in your child theme’s folder defined like this?

  fonts/Ubuntu/Ubuntu-Light.ttf

Please refer this topic, that may guide you easier.

Regards,
Kharis

Yes, I do.

I went to wordpress/wp-content/themes/sydney-child and created a new folder called fonts.

Than a made three folders Ubuntu, Kodchasan and PoiretOne and unziped my google fonts, so I have in my Ubuntu subfolder Ubunut-Light, Ubuntu-Bold etc.

Than I went in wordpress to editor to style.css and inserted the code as written above. But when I go to my elementor editor, I see than the fonts are still Google fonts, and not Custom fonts from my local folder as they should be.

Probably, as I am not experienced in coding rules, I made a mistake somewhere :wink: By the way, the theme is great.

Thank you & Best regards

Check if site caching has not ben cleared. This usually won’t recognise the last changes have made. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Thank you Kharis.

I tried clearing cache, but it still doesn´t work.

Because I used the google fonts linked from online (fonts.google), I had, and still have, under Customizing Fonts (in my SydneyChild Theme):

BODY FONTS;
Font name/style/sets:
Kodchasan:400,500,600" rel=“stylesheet”>

Font family:
‘Kodchasan’, sans-serif;

HEADINGS FONTS;
Font name/style/sets:
Ubuntu:400,700" rel=“stylesheet”>

Font family:
‘Ubuntu’, sans-serif;

Could here be the problem, that I need to change?!

Thank you & Best regards.

Hello there,

To allow me inspecting it directly, please share a link to your site.

Regards,
Kharis

I would be happy to do that, but the site is still on my localhost, and by that, I understand it is hard for you to give the possible solution.

Hello there,

Other alternative solution your could try might be this plugin

Regards,
Kharis

Just to close this topic…

When I sign out of Wordpress, then the fonts work according to coded, it looks like that :wink:

They show differently when I am in my Elementor editor, but that can be, because I had those fonts primarily online form fonts.google.

So I think that the above code was ok.

Thank you & Best regards

Okay Great!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis