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
• [x] 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.

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[Jak-Ch-ll]

@pskelin Thanks for getting back to me and sorry for the late response.

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

Yes, exactly

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

Both good points of information. After opening this issue I actually had the idea looking for the generated file in the node_modules, but I did not think about the CDN.

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

Honestly, I always like a step-by-step guide. Those make sure that all information necessary is included and no prior knowledge is required.

The font-face file is probably the most important piece of information, because it also tells us which fonts are needed and where to download them.

One additional question I have is, how often we should expect the fonts to change. So how often is it recommended to update the font-face file and redownload the fonts?

Regarding extraction, I think one of the easiest ways to do that with modern Node is probably this:

import fontface from './node_modules/@ui5/webcomponents-base/dist/generated/css/FontFace.css.js';