Custom self-hosted fonts

Resources Themes
1

Hey all!

First of all, I am sorry if my question has already been answered, but I spent a reasonable amount on the forum now searching for help but I did not find a solution.

I am completely new to Kirby. I just installed it last week on a new server from ALL-INKL. The installation was pretty smooth, and thanks to the awesome documentation everything worked out perfectly.

I also bought the Minima Theme from themesforkirby.com since I am a Designer with only very basic programming understanding, therefore I needed the benefits of a Theme. I would like to set a custom font for my new website. In my Kirby panel I have a dedicated section (screenshot attached) for it.

CleanShot 2022-02-07 at 11.40.03@2x
CleanShot 2022-02-07 at 11.40.03@2x1518Ă—1764 143 KB

But, now I am stuck. I uploaded the web fonts to my server in a new folder called fonts within Kirby’s assets folder. I also have the font.css in there. But how do I link the self-hosted fonts now within Kirby?

I would appreciate any help! Thank you in advance!

2

Reference your font files with @font-face in your css (CSS @font-face Rule) and use the defined name in your “font-family” declaration (or in your case put in in the “Body font family” field).

1 Like
3

I guess the screenshot you are showing above is part of the theme, right? To me, it looks as if those settings are only useful for fonts loaded from Google fonts, not for self-hosted fonts (as you can’t use those site settings in your CSS).

So I’d say forget about these settings and include the @font-face rules in the main stylesheet and then set the font family where needed in the CSS as already suggested by @stffr. Maybe also contact the theme developer for help with finding the right files.

1 Like
4

Thank you to both of you, @stffr and @texnixe, that helped me a lot and ultimately solved my problem!