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

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

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.


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!