What's new

Welcome to

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • Our resources on xenforo.asia Forum is CLEAN and SAFE. So you can use it for development or production. But sometime the antivirus will warn the JS code. It's no problem. So before downloading, you need to disable the antivirus tools and then enjoy your "Party"!

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

xenforo

Well-known member
Staff member
admin
Joined
Mar 18, 2019
Messages
406
Reaction score
871
Points
93
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
 
shape1
shape2
shape3
shape4
shape7
shape8
Top