How to add webfonts to your XenForo forum so that they work in the text editor


Well-known member
Staff member
There is an issue with the Redactor rich text editor used for editing posts. Webfonts linked in the XenForo site don't work in it. The problem is because it uses an iFrame, which is a separate environment and doesn't have access to the loaded webfonts in the main frame.

The solution to this is to include your webfont CSS in both the main and editor CSS.
So here's the tutorial...

How to add webfonts to your XenForo site so that they work in the text editor!

1. In the Admin CP, go to your templates list and create a new template named "webfonts.css".
Add the @import and/or @font-face rules for your webfonts.

2. Seek and open the template "xenforo.css". Paste this at the very top, above everything else.

<xen:include template="webfonts.css" />
3. Repeat for the "editor_contents.css" template.

And that's it! Your webfonts should work both inside and outside the text editor now. Check it out!

To add the webfonts to the editor's font list, see this tutorial.

This is my first guide/resource so give me feedback and let me know if there's anything wrong. I had just discovered this and was excited to write it ou

For school childeren

Total amount


Total amount
Donation ends: