KLE fonts for dummies

[BullRage]

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(http://fonts.gstatic.com/s/fredokaone/v4/SL0aFUFfkFMMdariYQ3_YY4P5ICox8Kq3LLUNMylGO4.woff2) 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('https://fonts.googleapis.com/css?family=Source+Code+Pro');
* { 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('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
* { font-family: 'Indie Flower'; }

?

May we use Indie Flower as an example here so I can understand, what's going on?
https://fonts.google.com/specimen/Indie+Flower?category=Handwriting

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(http://fonts.gstatic.com/s/fredokaone/v4/SL0aFUFfkFMMdariYQ3_YY4P5ICox8Kq3LLUNMylGO4.woff2) 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: https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap for example;
}

Second Step:
Declaring/importing the font:

@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap); 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.