Trouble Implementing Self-Hosted Fonts in Child Theme

  • Hey, thanks for the offer to contact you here!

    The situation is as follows:
    I have created a child theme for Aino. I based this on the code you provided with Pukeko. Then I tried implementing the font Ubuntu, which can be found at Google Fonts. Because of DSGVO, the font is supposed to be self-hosted. I used google-webfonts-helper and copied the data into my CSS file. The font versions are uploaded via FTP into a “fonts” folder in my “aino-child” folder, where the CSS file lies. As of yet, I have not found a way to make the font work on the page.

    First question: Is there anything I have to change in the functions.php file that might be the root of the problem? In the CSS file I have changed to following things:
    Theme Name: Aino Child
    Description: Aino Child Theme
    Author: to my name
    Author URI: to the websites name
    Template: aino
    Tags: Aino Child Theme

    Second question: Due to my inexperience, I am not quite certain which path I have to choose to link the fonts in the CSS file. I have tried several options though (../fonts/, ./fonts/, /fonts/, fonts/), none of which seem to work. I therefore don’t think that that’s the problem. Do you have any other suggestions that I could try to make the font work?

    Thank you very much already! I really appreciate your help and your work in general!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author ElmaStudio

    (@elmastudio)

    Hi there,

    thanks for installing the Aino theme.

    I’m not 100% sure, since I did not test your particular child theme. But in general when you inspect the CSS in the browser it should show you the file thew font is loaded from.

    Did you use the Aino Customizer setting to deactivate the Google font there?

    An alternative approach could be to try using the following plugin: https://www.ads-software.com/plugins/host-webfonts-local/ which makes it possible to use self-hosted Google fonts via the plugin.

    Maybe this is helpful and an easier approach to use an alternative font. There is another plugin called “Google Fonts Typography” which works really well for alternative fonts to the default font option. It also reflects the font in the editor which is helpful.

    Let me know, if you need further help.

    Best Regards,
    Ellen

    Thread Starter spression

    (@spression)

    Thank you, I will try the approach through the plugin. It seems my CSS file is not appropriately linked.

    All the best,
    Simon

    Thread Starter spression

    (@spression)

    The OMGF plugin worked wonders. Thanks a bunch for the recommendation! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trouble Implementing Self-Hosted Fonts in Child Theme’ is closed to new replies.