• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Change the Font in the Editor that you type

Eoj Nawoh

Active member
#1
Hello,

I'm in the process of creating a sub-style that uses a completely different font.

I've successfully replaced every instance of other fonts, except when typing in the quick reply or post reply/editor screen.

When typing in those boxes, it appears to still be Tahoma, I can not for the life of me figure out how to change it, any suggestions?

I will be very grateful, my friend frequently the website and I'm trying to create a dyslexic friendly layout/font for him and the many others who have dyslexia.

Quick Edit:
It works in the search, the PM title, the thread title, the shoutbox (TaigaChat), Xenforo Statuses, just no in Quick Reply, Reply, Text Editor when first posting a thread, and forum PM reply/convo start.

Quick Edit 2:
I have tried a number of solutions on XF, however, none of them have worked, BUT since I may have implemented them incorrectly, I'm just going to start from scratch suggestion wise.
 
Last edited:

Brogan

XenForo moderator
Staff member
#3
The editor font can be changed in Style Properties -> Rich Text Editor -> Editor Contents

I'm not sure how you changed the fonts elsewhere but a quick and dirty way would be to use * in EXTRA.css.
 

Eoj Nawoh

Active member
#4
The editor font can be changed in Style Properties -> Rich Text Editor -> Editor Contents

I'm not sure how you changed the fonts elsewhere but a quick and dirty way would be to use * in EXTRA.css.
I did use * for the vast majority of the changes.

For the Editor Contents, in the "font-family" area, I put:
'opendyslexic', Arial, Helvetica, sans-serif;
'opendyslexic', Arial, Helvetica, sans-serif
'opendyslexic'
opendyslexic

However, none of these appear to be working.
 

cclaerhout

Well-known member
#6
@Eoj Nawoh
Edit the template "editor_contents.css" and if you don't want to bother with existed style properties, add this to the body element properties:
Code:
  font-family: OpenDyslexic, 'Trebuchet MS', Helvetica, Arial, sans-serif;
You only need to wrap the font name between quotes if there's a whitespace in it (and may be with foreign language characters, but I forgot).

I've tested it and it works.
 

Eoj Nawoh

Active member
#7
Does the member have that font installed on their system?
Do they need to have it installed? I was under the belief that it just needed to be on the web server, as the status and etc worked. Obviously I could be wrong.

Note: Just installed it and still not working.

@Eoj Nawoh
Edit the template "editor_contents.css" and if you don't want to bother with existed style properties, add this to the body element properties:
Code:
  font-family: OpenDyslexic, 'Trebuchet MS', Helvetica, Arial, sans-serif;
You only need to wrap the font name between quotes if there's a whitespace in it (and may be with foreign language characters, but I forgot).

I've tested it and it works.
I've tried this, and it seems to still not be working.


Edit: This is the current editor_contents.css
Code:
html
{
    cursor: text;
    height: 100%;
    word-wrap: break-word;
    max-width: 100%;

    @property "html.background";
    background: @pageBackground url('@imagePath/xenfocus/background.jpg') repeat 50% 0;
    @property "/html.background";
    @property "html.font";

    @property "/html.font";
   
    @property "body.background";

    @property "/body.background";
    @property "body.font";
    font-size: 11px;
    font-family: OpenDyslexic, 'Trebuchet MS', Helvetica, Arial, sans-serif;
    color: @contentText;
    @property "/body.font";
   
    @property "content.background";
    background-color: @contentBackground;
    @property "/content.background";
    @property "content.font";

    @property "/content.font";

    @property "primaryContent.background";
    background-color: @contentBackground;
    @property "/primaryContent.background";
    @property "primaryContent.font";

    @property "/primaryContent.font";
   
    @property "messageInfo.background";

    @property "/messageInfo.background";
    @property "messageInfo.font";

    @property "/messageInfo.font";

    @property "messageText";
    font-size: 13px;
    line-height: 2;
    @property "/messageText";
   
    background-image: none;
   
    @property "editorContent";
    font-family: OpenDyslexic, 'Trebuchet MS', Helvetica, Arial, sans-serif;
    @property "/editorContent";
}

body
{
    padding: 8px;
    margin: 0;
    word-wrap: break-word;
    display: inline-block;
    width: 100%;
    min-height: 30px;
    box-sizing: border-box;
    cursor: auto;
    *display: block;
    *width: auto;
    font-family: OpenDyslexic, 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

body:empty
{
    min-height: 0 !important;
    height: 1.3em;
}

body.noElastic
{
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

a:link,
a:visited,
a:focus,
a:active
{
    cursor: text;
    background: transparent;
    {xen:helper cssImportant, @property "link";
color: @primaryDarker;
text-decoration: none;
@property "/link";}
    {xen:helper cssImportant, @property "ugcLink";
padding: 0 3px;
margin: 0 -3px;
@property "/ugcLink";}
}

img:-moz-broken, img:-moz-user-disabled { -moz-force-broken-image-icon: 1; }
img:-moz-broken:not([width]), img:-moz-user-disabled:not([width]) { width: 50px; }
img:-moz-broken:not([height]), img:-moz-user-disabled:not([height]) { height: 50px; }
img { max-width: 90%; border: none; cursor: pointer; }
img.mceSmilie, img.mceSmilieSprite, img.attachFull, img.attachThumb { cursor: text; }

p, div { margin: 0; padding: 0; }

font[size="1"] { font-size: 9px; }
font[size="2"] { font-size: 10px; }
font[size="3"] { font-size: 12px; }
font[size="4"] { font-size: 15px; }
font[size="5"] { font-size: 18px; }
font[size="6"] { font-size: 22px; }
font[size="7"] { font-size: 26px; }

blockquote { margin: 0 !important; padding: 0 !important; margin-left: 30px !important; }
body[dir=rtl] blockquote {  margin-right: 30px !important; margin-left: 0; }

<xen:include template="bb_code_base.css" />
<xen:include template="bb_code.css" />

/* make the font bigger to prevent zooming on iPhones */
@media (max-device-width:568px)
{
    body
    {
        font-size: 16px;
    }
}
 

Brogan

XenForo moderator
Staff member
#8
Changing it in Style Properties works for me with web safe fonts.

I haven't tested with a font which requires to be uploaded to the server.
 

cclaerhout

Well-known member
#9
Do they need to have it installed? I was under the belief that it just needed to be on the web server, as the status and etc worked. Obviously I could be wrong.
Download it here. And you must install it on your system. If you don't have a font manager and you're using Windows, extract the archive and move the files to your windows/fonts directory.

About the template, your edit is correct.
 

Eoj Nawoh

Active member
#10
Download it here. And you must install it on your system. If you don't have a font manager and you're using Windows, extract the archive and move the files to your windows/fonts directory.

About the template, your edit is correct.
I have the exact ones uploaded already installed on my machine. It just seems to not be working. :/
 

Eoj Nawoh

Active member
#12
Solution was to add a 3 to the name.

OpenDyslexic3, for the third generation of the font, he added a 3 and while OpenDyslexic worked for the web server since it was defined, I had to add the 3 for the editor areas. Thanks you all very much for your help.