XF 1.4 Change the Font in the Editor that you type

[Eoj Nawoh]

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.

 

[Amaury]

This resource of mine should help: https://xenforo.com/community/resources/customizing-font-family.2943/

 

[Paul B]

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]

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.

 

[Paul B]

Does the member have that font installed on their system?

 

[cclaerhout]

@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:

  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]

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:

  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

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;
    }
}

 

[Paul B]

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]

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]

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. :/

 

[Paul B]

It's working for me.

 

[Eoj Nawoh]

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.

 

[Eoj Nawoh]

And I don't have OpenDyslexic (original) or two installed, so I imagine that's why it didn't work initially.

Once again thanks @Brogan and @cclaerhout