Author Topic: KLE fonts for dummies  (Read 253 times)

0 Members and 1 Guest are viewing this topic.

Offline BullRage

  • Thread Starter
  • Posts: 19
  • Location: Germany
KLE fonts for dummies
« on: Wed, 07 April 2021, 05:34:41 »
I know there are several posts about custom fonts in KLE, but none seems to get through to me.
I have absolutely no clue about CSS or how this all works, so a bulletproof explanation would be great.

I read the Custom Styles help-page from KLE and the questions starting there.

1. When I declare/pointing to the font like this:

@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url( format('woff2');

Does this mean I have to have this specific font on my PC? When I copy-pasting the Fredoka One exampe it seems to work. Every other Google Font doesn't.

Where can I see the fonts.gstatic-adress of a font? Every Font I find only shows me a fonts.googleapis-adress.

2. I saw this:

@import url('');
* { font-family: 'Source Code Pro'; }

 and it worked without declaring anything. Why? And why doesn't it work, if I'm using another google font, like this:

@import url('');
* { font-family: 'Indie Flower'; }

May we use Indie Flower as an example here so I can understand, what's going on?

First step:
Pointing to the font:

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400; where do I find this information for this specific font (I know some fonts claim this, but it seems this one doesn't
  src: local('Indie Flower'), local('Indie Flower'), url( format('woff2') I don't know the gstatic-adress and i don't know what format, where can i find that? what I got from the google fonts-page is: for example;

Second Step:
Declaring/importing the font:

@import url(; I think at least I got this right, don't I?

Third step:
Change all keycaps:

* { font-family: 'Indie Flower'; }

Fourth step:

Nothing works.

BTW 1: I tried multiple browsers (Firefox, Chrome, Safari)
BTW 2: Indie Flower is just an example, there s no need to use this specific fonts, if the reason nothing works is, that this font can't be supported. I purely chose this one because one can immediately see a difference in the font style, if it works.

Thank you all for your help, already.
And please excuse, that I had to post this topic again, but no explanation on google, geekhack or reddit helped so far.
Plese help me out a little bit, so I can go on designing.
Proud owner of nothing!