1. 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

Discussion in 'Styling and Customization Questions' started by Eoj Nawoh, Feb 12, 2015.

  1. Eoj Nawoh

    Eoj Nawoh Active Member


    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: Feb 12, 2015
  2. Amaury

    Amaury Well-Known Member

  3. Brogan

    Brogan XenForo Moderator Staff Member

    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.
    Skylined and Amaury like this.
  4. Eoj Nawoh

    Eoj Nawoh Active Member

    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

    However, none of these appear to be working.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Does the member have that font installed on their system?
  6. cclaerhout

    cclaerhout Well-Known Member

    @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.
  7. Eoj Nawoh

    Eoj Nawoh Active Member

    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.

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

    Edit: This is the current editor_contents.css
        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";
        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;
        min-height: 0 !important;
        height: 1.3em;
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        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)
            font-size: 16px;
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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.
  9. cclaerhout

    cclaerhout Well-Known Member

    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.
  10. Eoj Nawoh

    Eoj Nawoh Active Member

    I have the exact ones uploaded already installed on my machine. It just seems to not be working. :/
  11. Brogan

    Brogan XenForo Moderator Staff Member

    It's working for me.


  12. Eoj Nawoh

    Eoj Nawoh Active Member

    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.
  13. Eoj Nawoh

    Eoj Nawoh Active Member

    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

Share This Page