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

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

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.

is working on a reply...