Can I use our brand font in XWiki?

jbl · July 19, 2023, 2:58pm

Hi! I want to know if it is possible to setup the XWiki instance using our brand font. If so

Which folder should I put it in the server?
What file type should be used (e.g., .ttf)?

Thanks in advance!

nikpetrenko · July 21, 2023, 7:53am

Hello,

Yes you can. There’re several options.
1st, you can add your font file (ttf) locally. If you check the XWiki repo page. All fonts are stored in webapp/WEB_INF/fonts folder.

Add one of your font (or any other ttf files) into /webapps/xwiki/WEB-INF/fonts. You need to restart your wiki after these changes.
After restarting it remains only to choose it
For this you shall navigate to Administer Wiki → Look & Feel → Themes → Customize, from Color Theme section → click on Typography
Fill the name of your font and check the preview window (it’ll refresh automatically)
Finally, if you’re okay with the representation, press “Save”

If the name was filled correctly, you’ll see changes in text fonts after autorefresh. For instance, I’ve downloaded and put a .ttf file with the name of font “Cooper*” after I followed the steps - I’ll see a font in my XWiki.

2nd option, You can use remote fonts - it can be set up according to this reply - How to modify fonts on 10.6.1 Version of XWiki? - #2 by ClemensRobbenhaar

Hope, after this, you’ll see a nice brand font in your XWiki

pdwalker · July 21, 2023, 10:55am

You can also consider adding the customized CSS to the theme you use.

There are at least two ways you can do this:

1/ Global Administration, Look & Feel, Presentation, HTTP Meta Info:
add the necessary CSS as you would write in an HTML HEAD section here. This will be applied to all pages regardless of what theme you use.

2/ Global Administration, Look & Feel, Themes, Color Theme (selected theme), Customize, Advanced:
add in the necessary CSS/Less code. This will only apply to the selected theme.

Personally, I went with #1 and I use the google web fonts for my customized font.

[edit] Also, I go to the typography section to include the new fonts that I’ve included from my CSS code.

Ricardo_Rodriguez · October 2, 2024, 7:45pm

Hi! After upgrading to XWiki Debian 16.8.0, something is failing here, or I don’t understand how customization of fonts does work in XWiki.

Before the update, the following settings show the right font in the browser:

These are the contents of /usr/lib/xwiki/WEB-INF/fonts:

rjr@IGFAE-MU-07-MacPro:/usr/lib/xwiki/WEB-INF/fonts$ ls -la
total 50788
drwxr-xr-x 2 root root     4096 oct  2 19:12 .
drwxr-xr-x 6 root root     4096 oct  2 19:25 ..
-rw-r--r-- 1 root root     6904 sep 25  2023 AUTHORS-freefont
-rw-r--r-- 1 root root    23240 sep 25  2023 CREDITS-freefont
-rw-r--r-- 1 root root   295360 sep 25  2023 FreeMonoBoldOblique.ttf
-rw-r--r-- 1 root root   296284 sep 25  2023 FreeMonoBold.ttf
-rw-r--r-- 1 root root   390692 sep 25  2023 FreeMonoOblique.ttf
-rw-r--r-- 1 root root   584424 sep 25  2023 FreeMono.ttf
-rw-r--r-- 1 root root   342488 sep 25  2023 FreeSansBoldOblique.ttf
-rw-r--r-- 1 root root   416128 sep 25  2023 FreeSansBold.ttf
-rw-r--r-- 1 root root   763696 sep 25  2023 FreeSansOblique.ttf
-rw-r--r-- 1 root root  1563256 sep 25  2023 FreeSans.ttf
-rw-r--r-- 1 root root   608708 sep 25  2023 FreeSerifBoldItalic.ttf
-rw-r--r-- 1 root root  1310828 sep 25  2023 FreeSerifBold.ttf
-rw-r--r-- 1 root root   922088 sep 25  2023 FreeSerifItalic.ttf
-rw-r--r-- 1 root root  3303588 sep 25  2023 FreeSerif.ttf
-rw-r--r-- 1 root root 10385096 sep 25  2023 gulim.ttf
-rw-r--r-- 1 root root  8061296 sep 25  2023 ipam.ttf
-rw-r--r-- 1 root root    35147 sep 25  2023 LICENSE-freefont
-rw-r--r-- 1 root root      482 sep 25  2023 LICENSE-gulim
-rw-r--r-- 1 root root     9062 sep 25  2023 LICENSE-ipam
-rw-r--r-- 1 root root     4301 sep 25  2023 LICENSE-noto
-rw-r--r-- 1 root root     6901 sep 25  2023 LICENSE-uming
-rw-r--r-- 1 root root   418804 sep 25  2023 NotoEmoji-Regular.ttf
-rw-r--r-- 1 root root     5115 sep 25  2023 README-freefont
-rw-r--r-- 1 root root      581 sep 25  2023 README-gulim
-rw-r--r-- 1 root root      420 sep 25  2023 README-noto
-rw-r--r-- 1 root root      855 sep 25  2023 README-uming
-rw-r--r-- 1 root root    91980 sep  3 00:38 RoobertBoldItalic.ttf
-rw-r--r-- 1 root root    86804 sep  3 00:38 RoobertBold.ttf
-rw-r--r-- 1 root root    90592 sep  3 00:38 RoobertHeavyItalic.ttf
-rw-r--r-- 1 root root    86120 sep  3 00:38 RoobertHeavy.ttf
-rw-r--r-- 1 root root    90692 sep  3 00:38 RoobertLightItalic.ttf
-rw-r--r-- 1 root root    85888 sep  3 00:38 RoobertLight.ttf
-rw-r--r-- 1 root root    92408 sep  3 00:38 RoobertMediumItalic.ttf
-rw-r--r-- 1 root root    87040 sep  3 00:38 RoobertMedium.ttf
-rw-r--r-- 1 root root    92332 sep  3 00:38 RoobertRegularItalic.ttf
-rw-r--r-- 1 root root    87140 sep  3 00:38 RoobertRegular.ttf
-rw-r--r-- 1 root root    92116 sep  3 00:38 RoobertSemiBoldItalic.ttf
-rw-r--r-- 1 root root    87100 sep  3 00:38 RoobertSemiBold.ttf
-rw-r--r-- 1 root root     4581 sep 25  2023 TROUBLESHOOTING-freefont
-rw-r--r-- 1 root root 21053592 sep 25  2023 uming.ttc
-rw-r--r-- 1 root root     6060 sep 25  2023 USAGE-freefont
rjr@IGFAE-MU-07-MacPro:/usr/lib/xwiki/WEB-INF/fonts$

After the upgrade, I’m not able to use Roobert as our brand font.

Could the upgrade be the responsible for the new behaviour? Must I get Roobert as my site font with the Typography settings show above?

Thanks for your help!

Ricardo_Rodriguez · October 3, 2024, 3:58am

It is working again:

I think I tried yesterday also by setting both @font-family-base and @font-family-sans-serif. The point is that it is working again now. Perhaps some issues related with style.min.css being cached?

nikpetrenko · October 3, 2024, 6:57am

I also updated myself up to 16.8.0 2 days ago, and I am not encountering such issue.