C# MVC TinyMCE editor not displaying content in Adobe typekit font

Question

I am using TinyMCE editor 4.7.0. I have a custom Adobe typekit font that I want to display the editor content in. I am loading the typekit in the _Layout file. In my TinyMce.init file I have the following settings:

font_formats: 'Freight="freight-sans-pro",sans-serif; 
Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace;',

which makes sure the fonts drop down list has a number of choices.

I also have setup function to set the editor to the font:

 setup: function (ed) {
    // set the editor font size
    ed.on('init', function (e) {
        ed.execCommand("fontSize", false, "16px");
        ed.execCommand("fontName", false, "\"freight-sans-pro\",sans-serif");
    });
},

I also have a custom_css pointed to in the init file that contains:

.tinymcebody {
font-family: "freight-sans-pro",sans-serif;
font-size: 16px;
font-weight: normal;
}

My text is not displayed in freight-sans-pro but rather in Arial according to the Chrome developer tools which identifies the rendered font. If set the body of the whole site to have font-family: freight then all content except the TinyMCE editor content is displayed in the right font.

Can anybody help resolve what I am doing wrong in the setup please as it looks like TinyMCE is incapable of using this font and is falling back to a standard sans-serif font?

did you tried to remove the double quotation mark from the font name? like font-family: freight-sans-pro,sans-serif; and font_formats: 'Freight=freight-sans-pro,sans-serif;' — Sid

Sid Sid · Accepted Answer · 2017-11-16T17:34:23

Try to add the font in theme_advanced_fonts in the TinyMCE init file.

tinyMCE.init({
    ...
    theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Freight=freight-sans-pro,sans-serif"
});

C# MVC TinyMCE editor not displaying content in Adobe typekit font

1 Answers