Embedding fonts

Hi.

Here How to use a custom font in XWiki? (XWiki.org) is a description on how to use custom fonts.

Do I get it right that a font has to be installed on the users device to be shown?
Or is it possible to provide fonts via XWiki (as described in “Upload locally custom FFT file”) so that the browser shows the correct one.

We’d like to use a non-google font, that’s why this way of implementing fonts is not in our scope.

Thx.

Regards Roland

Do I get it right that a font has to be installed on the users device to be shown?
Or is it possible to provide fonts via XWiki (as described in “Upload locally custom FFT file”) so that the browser shows the correct one.

So how this works in brief words. If the user has the font: they will see your design as intended. If the user doesn’t have the font: their browser defaults to a similar (normally such font is set by default i.e MS Edge edge://settings/appearance/fonts). If user’ browser doesn’t have such font than a system OS will be used (but this rare case)

There’s a previous discussion Using brand font: only one box is behaving differently - Help / Discuss - XWiki Forum where some clarifications were provided.

By the way, if you think that FAQ page lacks details, feel free to contribute by improving it.

1 Like

You can install the font as an extension, e.g., as a WebJar so it can be served from XWiki instead of serving it from Google. That’s how we bundle Font Awesome for example. You can search at https://www.webjars.org/ for fonts that were already packaged and install the indicated dependency using the advanced search in the extension manager. You can check https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/IntegratingJavaScriptLibraries/#HHowcanweuseWebJars how to get the URL of a WebJar resource, you can reference it in the same in a CSS skin extension where parsing is enabled and then declare it as a font in the CSS code.

You can of course also upload it on the server as indicated in the guide, to me, it just seems a bit cleaner to install it as an extension.

I hope that makes sense even though my description is a bit brief.

2 Likes

This only makes the upgrade a little more difficult, you will have to back up/pre-save these files, otherwise after the upgrade XWiki will not find them and will throw errors in the browser console.

Why should extensions get lost during an upgrade? I’m not suggesting any manual copying, just installing a WebJar from Maven Central as a regular extension.

Honestly, I didn’t know about such way - installing as webjar