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

xenforo

Well-known member
Staff member
administrator
Moderator
Registered
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.

Code:
<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!
how-to-add-webfonts-to-your-xenforo-forum-so-that-they-work-in-the-text-editor.png


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
$0.00
Goal
$50.00

Help

Total amount
$0.00
Goal
$50.00
Donation ends:
Top