Jon Sexton
Feb 26, 2021
  1366
(5 votes)

How to set primary (default) and secondary (optional) fonts for TinyMCE in EPiServer CMS 11

Aim

The client requirements were to have the generic TinyMCE editors (XhtmlString), across the EPiServer CMS (v11.20) site, to give content editors the ability to have only primary (default) and secondary (optional) custom fonts to use.  Either font is to be used in the following block formats:

P, H1, H2, H3, H4, H5 and H6

Situation

There was a lot of information on the Net, in various EPiServer blogs, on how to set styles (font colours, font sizes, etc.) but very little up-to-date information on how to change the actual fonts to custom ones.  After a lot of research, and even more trial and error, we finally came up with a workable solution.

Solution

  1. The first thing to do is to make changes to the ‘editorStyles.css’ file. Ours was in ‘[EPiServer website]\ClientResources\Styles\editorStyles.css’.  We needed to add two custom fonts, ‘Solomon’ and ‘BornReady’ and create CSS classes that use them, hence:
@font-face {
    font-family: Solomon;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url(/assets/main/fonts/solomon/normal_normal_normal.woff2) format("woff2"),
         url(/assets/main/fonts/solomon/normal_normal_normal.woff) format("woff")
}

@font-face {
    font-family: BornReady;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url(/assets/main/fonts/bornreadyupright/normal_normal_normal.woff2) format("woff2"),
         url(/assets/main/fonts/bornreadyupright/normal_normal_normal.woff) format("woff")
}

.bornready {font-family: BornReady,sans-serif,Arial,Verdana,"Trebuchet MS";}

.solomon {font-family: Solomon,sans-serif,Arial,Verdana,"Trebuchet MS";}

Note the use of fallback fonts in the CSS classes (good practice).

2. The next thing to do is to create an initialisation module for the TinyMCE editor and configure it so the TinyMCE editor operates as per the client’s requirements.

Ours looks like this:

[ModuleDependency(typeof(TinyMceInitialization))]
public class CustomTinyMceInitializationModule : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {}

    public void Uninitialize(InitializationEngine context)
    {}

    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
            .AddEpiserverSupport()
            .AddSetting("paste_as_text", true)
            .AddSetting("paste_webkit_styles", true)
            .AddSetting("paste_merge_formats", true)
            .AddSetting("paste_remove_styles_if_webkit", true)
            .AddPlugin("epi-link epi-dnd-processor epi-personalized-content help image fullscreen lists searchreplace hr table paste media code")
            .Toolbar("bold italic superscript subscript quote citation bullist numlist undo redo | styleselect formatselect removeformat",
                "epi-link epi-unlink anchor | cut copy paste pastetext pasteword | table | code | image epi-image-editor | epi-personalized-content | fullscreen ")
            .ContentCss("/ClientResources/Styles/editorStyles.css")
            .BodyClass("solomon")
            .StyleFormats(new {title = "BornReady font", selector = "p,h1,h2,h3,h4,h5,h6", classes = "bornready"})
            .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6;");
        });
    }
}

Points to note:

    • Add ‘styleselect’ and ‘formatselect’ items to the toolbar setting.
    • Tell TinyMCE what stylesheet to use. This is done by adding the line, ‘.ContentCss(“/ClentResources/Styles/editorStyles.css”)’.
    • Set the primary (default) font. This is done by adding the line, ‘.BodyClass(“solomon”)
    • Set the styles available for the ‘styleselect’ toolbar item as a new object, hence:

.StyleFormats( new{title=”[name of font]”, selector=”[comma separated list of block formats to apply the font to (see below)]”, classes=”bornready”})

    • Finally, set the block formats available for the ‘formatselect’ toolbar item as a semicolon separated list of string values, hence:

.BlockFormats(“Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6”);

3. Now compile your solution, refresh the CMS in your browser and try out the TinyMCE editor. You should be able to add a paragraph that will be displayed in the default font, in our case, ‘solomon’ but, by highlighting this text and selecting the ‘BornReady font’ from the ‘styleselect’ dropdown in the toolbar, the text will be displayed in the secondary font.  By selecting different options from the ‘formatselect’ dropdown in the toolbar, you can change your text from paragraph to H1, H2, and so on.

Example:

Line 1, paragraph in secondary font.

Line 2, H2 in primary font.

Line 3, H2 in secondary font.

Line 4, paragraph in primary font.

So, there we go, a workable solution to the problem.  Please feel free to leave comments.

Thanks to Sam Brooks of dotcentric Ltd for his assistance in arriving to the final solution.

 

Feb 26, 2021

Comments

Adam B
Adam B Feb 26, 2021 11:39 AM

Thanks Jon, this is really helpful!

Adam B
Adam B Feb 26, 2021 11:43 AM

Thanks Jon, this is really helpful!

Giuliano Dore
Giuliano Dore Feb 26, 2021 03:35 PM

I had no idea it was possible to do that, well done Jon ! 🙂

Please login to comment.
Latest blogs
Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog