Improve 'Custom Fonts' documentation

[Jak-Ch-ll]

Issue Description

The current documentation is missing information about how to setup the @font-faces to load the SAP fonts locally. It has the 72 font-face as example, but for there are obviously a bunch more fonts to setup.

In earlier versions there was a FontFace.css file that could just be copied and adapted, but in the current version the font-faces are generated and injected, so this isn't that easy anymore. And even then if would be nice if that was documented.

Issue Type

• Documentation is unclear
• Documentation is incorrect
• Documentation is missing
• Other

[pskelin]

I suppose you are referring to this documentation?
https://ui5.github.io/webcomponents/docs/advanced/fonts/

The actual font faces are generated and can be found in node_modules or a CDN like here:
https://cdn.jsdelivr.net/npm/@ui5/webcomponents-base/dist/generated/css/FontFace.css.js

How would you imagine the documentation? Would a link to this file with instructions to extract only the string between the backticks be enough?

``

Any suggestions are welcome.