Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Andreas Pfanner 196 posts 314 karma points
    Sep 15, 2014 @ 16:23
    Andreas Pfanner
    0

    RTE styles

    Hi,

    I'm using Umbraco 7.1.5 and would like to have the correct content appearance (according to my sites stylesheet) in the Rich Text editor (including font face etc).

    By relating my stylesheet to the RTE data type I get some of the styles (colors, sizes), but content is always displayed with Verdana instead of my font.

    It seems that the problem was already reported 4 months ago: http://issues.umbraco.org/issue/U4-4797

    Isn't it a problem for the most users, that the styles aren't correct, or why is there so little attention on that issue?

    Best Regards Andreas

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Sep 15, 2014 @ 18:25
    Dennis Aaen
    0

    Hi Andreas,

    I have just tried to use a specific font-family in the RTE editor in a Umbraco 7.1.5 installation without any problems. The way I do it was by. First find the font, that you want to use, and the next step I did was to use the font-family generator from Font squirrel http://www.fontsquirrel.com/tools/webfont-generator

    After you have use the generator you will get some optimized files, and a stylesheet that looks something like this:

    @font-face {
        font-family: 'open_sansitalic';
        src: url('opensans-italic-webfont.eot');
        src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
             url('opensans-italic-webfont.woff2') format('woff2'),
             url('opensans-italic-webfont.woff') format('woff'),
             url('opensans-italic-webfont.ttf') format('truetype'),
             url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    After that I created a folder at my Umbraco installation called fonts, and make the path to the files correct.

    @font-face {
        font
    -family:'open_sansitalic';
        src
    : url('/fonts/opensans-italic-webfont.eot');
        src
    : url('/fonts/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
             url
    ('/fonts/opensans-italic-webfont.woff2') format('woff2'),
             url
    ('/fonts/opensans-italic-webfont.woff') format('woff'),
             url
    ('/fonts/opensans-italic-webfont.ttf') format('truetype'),
             url
    ('/fonts/opensans-italic-webfont.svg#open_sansitalic') format('svg');
        font
    -weight: normal;
        font
    -style: normal;

    }

    After done that I logged into my Umbraco installation, and open up the stylesheet folder in the setttings sections, and find the stylesheet for the RTE. In this stylesheet I add this styling for the paragraph tag.

    p{ 
        font-family: "open_sansitalic";
        font-size: 13px;
    }

    You can also just use another standard font, like Arial:

    p{ 
        font-family: "Arial";
        font-size: 13px;
    }

    Then you can make a style for the style dropdown if it´s shoud be possible for your content editors to choose a paragraph tag in the style dropdown.

    Hope this helps,

    /Dennis

  • Andreas Pfanner 196 posts 314 karma points
    Sep 16, 2014 @ 11:08
    Andreas Pfanner
    0

    Hi Dennis,

    thanks for the detailed explanation, but I'm afraid its kind of a misunderstanding: My problem is that the content appeared in the Rich Text Editor isn't shown in the proper font, because content.min.css of the RTE skin overrides it (Verdana is defined there). I guess its because my site CSS file is appended to the RTE control and after that the skin (so, as explained in the support ticket, maybe just a order issue).

    Best Regards Andreas

  • Eric Schrepel 161 posts 226 karma points
    Feb 25, 2016 @ 01:15
    Eric Schrepel
    0

    Relatedly, as of 7.1.4, many of the Umbraco UI is in Open Sans font, which is nice, but wondered how we could make the Rich Text editor default to that also (for consistency).

    We've modified the .mce-content-body style at /umbraco/lib/tinymce/skins//umbraco/content.min.css to match the 14px font size used throughout the UI, but can't pick 'Open Sans', 'Helvetica Neue'... as the font-family as it's not available.

    We see the font at /umbraco/assets/fonts/opensans, but unclear where to tell tinymce to reference that (if possible).

    Not a huge issue, just that our rich-text fields look slightly different than the remaining fields.

Please Sign in or register to post replies

Write your reply to:

Draft