Can I use our brand font in XWiki?

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!

1 Like

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

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.

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!

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?

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