Blog posts by Jon Sexton

More on custom Style Formats in TinyMCE

Wed, 09 Jun 2021 15:58:01 GMT

One of the problems we come across, when adding in our custom style formats for TinyMCE in the EPiServer CMS, is that this overrides the default settings. For example, a client may require the following style format options:

Headings
- Heading 1
- Heading 2
- etc...
Inline
- Bold
- Italic
- Underline
- Strikethrough
- Superscript
- Subscript
- Code
Blocks
- Paragraph
- Blockquote
- Div
- Pre
Alignment
- Left
- Center
- Right
- Justify
[a new font to select from]

All standard, out-of-the-box stuff, for TinyMCE, however, when we add a custom style format (in this case for the new font option the client requires) in our TinyMCE intialisation class, and as described in a previous post: https://world.episerver.com/blogs/jon-sexton/dates/2021/2/how-to-set-primary-default-and-secondary-optional-fonts-for-tinymce-in-episerver-cms-11/, all these default style formatting options are blasted away, great!

This blog will show how to put them back in.

Firstly, there appears to be no functionality available to us to simply append a new style format option to the existing set of default options, well, none that I could find nor get working. Unfortunately we're going to have to add these in manually; here's how...

In our TinyMCE initialisation class let's start by adding in the Headings and Headings sub-menu:

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .AddEpiserverSupport()
                    .AddSetting("paste_as_text", true)
                    .AddSetting("paste_webkit_styles", "none")
                    .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(
                        // Headings
                        new
                        {
                            title = "Headings", items = new[]
                            {
                                new { title = "Heading 1", block = "h1" },
                                new { title = "Heading 2", block = "h2" },
                                new { title = "Heading 3", block = "h3" },
                                new { title = "Heading 4", block = "h4" },
                                new { title = "Heading 5", block = "h5" },
                                new { title = "Heading 6", block = "h6" }
                            }
                        })
                    .BlockFormats(
                        "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6;");
            });
        }

Pretty easy really and we only need to remember that each sub-item in an item we create, "Headings" in this case, needs to have the same format as the other sub-items in the set.

Now we need to add the 'Inline' options:

                    .StyleFormats(
                        // Headings
                        new
                        {
                            title = "Headings", items = new[]
                            {
                                new { title = "Heading 1", block = "h1" },
                                new { title = "Heading 2", block = "h2" },
                                new { title = "Heading 3", block = "h3" },
                                new { title = "Heading 4", block = "h4" },
                                new { title = "Heading 5", block = "h5" },
                                new { title = "Heading 6", block = "h6" }
                            }
                        },
                        // Inline (formats selected text)
                        new
                        {
                            title = "Inline", items = new[]
                            {
                                new { title = "Bold", inline = "span", classes = "boldText" },
                                new { title = "Italic", inline = "span", classes = "italicText" },
                                new { title = "Underline", inline = "span", classes = "underlineText" },
                                new { title = "Strikethough", inline = "span", classes = "strikethrough" },
                                new { title = "Superscript", inline = "span", classes = "superscript" },
                                new { title = "Subscript", inline = "span", classes = "subscript" },
                                new { title = "Code", inline = "span", classes = "code" }
                            }
                        })

The trick with these format options lies in using the 'inline = "span"' and 'classes = "[CSS CLASSNAME]"' attributes. This ensures that only the selected text is formatted as required, not the entire block of text the cursor is on. By defining a CSS classname (more on this later) we can have more than one style element, e.g. the "superscript' CSS class contains 'vertical-align: super; font-size: smaller' in order to mimic the HTML <sup> tag.

Now let's add in our 'Blocks' options:

                    .StyleFormats(
                        // Headings
                        new
                        {
                            title = "Headings", items = new[]
                            {
                                new { title = "Heading 1", block = "h1" },
                                new { title = "Heading 2", block = "h2" },
                                new { title = "Heading 3", block = "h3" },
                                new { title = "Heading 4", block = "h4" },
                                new { title = "Heading 5", block = "h5" },
                                new { title = "Heading 6", block = "h6" }
                            }
                        },
                        // Inline (formats selected text)
                        new
                        {
                            title = "Inline", items = new[]
                            {
                                new { title = "Bold", inline = "span", classes = "boldText" },
                                new { title = "Italic", inline = "span", classes = "italicText" },
                                new { title = "Underline", inline = "span", classes = "underlineText" },
                                new { title = "Strikethough", inline = "span", classes = "strikethrough" },
                                new { title = "Superscript", inline = "span", classes = "superscript" },
                                new { title = "Subscript", inline = "span", classes = "subscript" },
                                new { title = "Code", inline = "span", classes = "code" }
                            }
                        },
                        // Blocks (applies HTML tags)
                        new
                        {
                            title = "Blocks", items = new[]
                            {
                                new { title = "Paragraph", block = "p" },
                                new { title = "Blockquote", block = "blockquote" },
                                new { title = "Div", block = "div" },
                                new { title = "Pre", block = "pre" }
                            }
                        })

The difference here is that we're applying HTML tags around the block of text in scope, for <p>, <blockquote>, <div> and <pre> respectively.

Now let's add in our 'Alignments' section:

                    .StyleFormats(
                        // Headings
                        new
                        {
                            title = "Headings", items = new[]
                            {
                                new { title = "Heading 1", block = "h1" },
                                new { title = "Heading 2", block = "h2" },
                                new { title = "Heading 3", block = "h3" },
                                new { title = "Heading 4", block = "h4" },
                                new { title = "Heading 5", block = "h5" },
                                new { title = "Heading 6", block = "h6" }
                            }
                        },
                        // Inline (formats selected text)
                        new
                        {
                            title = "Inline", items = new[]
                            {
                                new { title = "Bold", inline = "span", classes = "boldText" },
                                new { title = "Italic", inline = "span", classes = "italicText" },
                                new { title = "Underline", inline = "span", classes = "underlineText" },
                                new { title = "Strikethough", inline = "span", classes = "strikethrough" },
                                new { title = "Superscript", inline = "span", classes = "superscript" },
                                new { title = "Subscript", inline = "span", classes = "subscript" },
                                new { title = "Code", inline = "span", classes = "code" }
                            }
                        },
                        // Blocks (applies HTML tags)
                        new
                        {
                            title = "Blocks", items = new[]
                            {
                                new { title = "Paragraph", block = "p" },
                                new { title = "Blockquote", block = "blockquote" },
                                new { title = "Div", block = "div" },
                                new { title = "Pre", block = "pre" }
                            }
                        },
                        // Text alignment (applies to all block formats)
                        new
                        {
                            title = "Alignment", items = new[]
                            {
                                new { title = "Left", selector = "p,h1,h2,h3,h4,h5,h6", classes = "leftAlign" },
                                new { title = "Center", selector = "p,h1,h2,h3,h4,h5,h6", classes = "centerAlign" },
                                new { title = "Right", selector = "p,h1,h2,h3,h4,h5,h6", classes = "rightAlign" },
                                new { title = "Justify", selector = "p,h1,h2,h3,h4,h5,h6", classes = "justifyAlign" }
                            }
                        })

Note that we've ensured that the options are applied to all block formats.

Now we can add in our new custom item, in this case a specific font:

                    .StyleFormats(
                        // Headings
                        new
                        {
                            title = "Headings", items = new[]
                            {
                                new { title = "Heading 1", block = "h1" },
                                new { title = "Heading 2", block = "h2" },
                                new { title = "Heading 3", block = "h3" },
                                new { title = "Heading 4", block = "h4" },
                                new { title = "Heading 5", block = "h5" },
                                new { title = "Heading 6", block = "h6" }
                            }
                        },
                        // Inline (formats selected text)
                        new
                        {
                            title = "Inline", items = new[]
                            {
                                new { title = "Bold", inline = "span", classes = "boldText" },
                                new { title = "Italic", inline = "span", classes = "italicText" },
                                new { title = "Underline", inline = "span", classes = "underlineText" },
                                new { title = "Strikethough", inline = "span", classes = "strikethrough" },
                                new { title = "Superscript", inline = "span", classes = "superscript" },
                                new { title = "Subscript", inline = "span", classes = "subscript" },
                                new { title = "Code", inline = "span", classes = "code" }
                            }
                        },
                        // Blocks (applies HTML tags)
                        new
                        {
                            title = "Blocks", items = new[]
                            {
                                new { title = "Paragraph", block = "p" },
                                new { title = "Blockquote", block = "blockquote" },
                                new { title = "Div", block = "div" },
                                new { title = "Pre", block = "pre" }
                            }
                        },
                        // Text alignment (applies to all block formats)
                        new
                        {
                            title = "Alignment", items = new[]
                            {
                                new { title = "Left", selector = "p,h1,h2,h3,h4,h5,h6", classes = "leftAlign" },
                                new { title = "Center", selector = "p,h1,h2,h3,h4,h5,h6", classes = "centerAlign" },
                                new { title = "Right", selector = "p,h1,h2,h3,h4,h5,h6", classes = "rightAlign" },
                                new { title = "Justify", selector = "p,h1,h2,h3,h4,h5,h6", classes = "justifyAlign" }
                            }
                        },
                        // BornReady font (applies to all block formats)
                        new
                        {
                            title = "BornReady font", selector = "p,h1,h2,h3,h4,h5,h6", classes = "bornready"
                        })

And that's it for ensuring that our default options are still available even thouigh we've added in a new style format (for the specific font).

Finally, a quick look at the CSS where we've defined our classes:

@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";
}
.boldText {
    font-weight: bold;
}
.italicText {
    font-style: italic;
}
.underlineText {
    text-decoration: underline
}
.strikethrough {
    text-decoration: line-through;
}
.superscript {
    vertical-align: super;
    font-size: smaller;
}
.subscript {
    vertical-align: sub;
    font-size: smaller;
}
.code {
    font-family: monospace;
}
.leftAlign {
    text-align: left;
}
.centerAlign {
    text-align: center;
}
.rightAlign {
    text-align: right;
}
.justifyAlign {
    text-align: justify;
}

Summary

Yes, it would be so much easier if we had the facility to copy our default style format options, then append our new one to them. Unfortunately we don't have that option so I hope what I have written will be useful to you all, when presented with the same scenario.

Comments and thoughts always welcomed.

How to easily remove the extra DIV tags for Content Areas

Thu, 03 Jun 2021 11:06:22 GMT

Extra DIV tags around Content Areas

From time to time we've all had issues with the extra DIV tags EPiServer generates around Content Area items, namely blocks. Depending upon the required output this 'feature' (that is actually there for on-page editing in the CMS) may cause some extra padding around the output of the blocks in the Content Area, meaning that the output does not match the UX design.

For example:

@Html.PropertyFor(x => x.SomeContentArea)

Which results in:

<div>          <!-- Contant Area wrapper -->
    <div...>    <!-- Block element -->
        <... />  <!-- Content of block -->
    </div>
</div>

Without writing specific renderers for our Content Areas we ask, 'is there a way we can easily disable these extra DIV tags?'.

Well, EPiServer does provide us with an 'additionalViewData' attribute called, 'HasContainer', which can be used, hence:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false } )

Will result in:

<div...>    <!-- Block element -->
    <... />  <!-- Content of block -->
</div>

Great but there's still a wrapper around the content of the block, how do we get rid of that?

Well, there's a NuGet package that we can add into our solution, 'EPiBootstrapArea', written by Valdis Iljuconoks. From version 3.3.4 onwards we can add:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false, HasItemContainer = false } )

Which gives us:

<... />  <!-- Content of block -->

Perfect! Everything renders correctly now, AND we still have an on-page editing experience in the CMS.

A word of warninng though; if we're going to render our blocks in our Content Area in the <HEAD> section of our page then we may run into trouble with invalid markup when viewing in on-page editing mode in the CMS. We can get around this by adding another attribute, hence:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false, HasItemContainer = false, HasEditContainer = false } )

This will get us out of trouble but, although the blocks in the Content Area are rendered, we cannot edit it in on-page editing and we'll have to switch to the properties view. No big deal in my opinion.

A huge thanks to Valdis Iljuconoks, their solution worked a treat for the bug I was working on and I added it here in the hope that other people find it as useful as I did.

TinyMCE Table Templates

Sat, 27 Mar 2021 15:58:31 GMT

Aim.

Lately we had a requirement from one of our clients to enable the WYSIWYG editor on a page (XHtmlString property (TinyMCE)) in the CMS to cater for a set of preformed table templates. The notion was to allow content editors to enter data into a simple table in the WYSIWYG editor but, to make the task easier, they should be able to select what sort of table they require, as opposed to having to create one themselves.

Situation.

By reducing the number of tools available in the WYSIWYG editor toolbar, to just bold, italic, undo, redo and a new template button (less is more), the content editor will be able to quickly complete the task without any unnecessary clutter on the WYSIWYG editor in question. The new template button will enable the content editor to select what preformed template they require for the specific task. This custom configuration of TinyMCE can then be applied to one or more page types.

Solution.

So that's enough of the 'what' and 'why', now for the 'how'.

Firstly, let's create a couple of (really simple) preformed template tables in HTML, thus:

<h5>Table title</h5>
<table cellpadding="10">
    <thead>
    <tr>
        <td>Document</td>
        <td>Part Number</td>
        <td>Type</td>
        <td>Size</td>
        <td>Date Added</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

and:

<table cellpadding="10">
    <thead>
    <tr>
        <td>Document</td>
        <td>Part Number</td>
        <td>Type</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

Note that the first template caters for a heading, outside of the main table, and five columns, whereas the second template caters for only three columns. Also note that we have added the 'cellpadding="10"' attribute to the table tag (I know 'cellpadding' is an obsolete attribute but trust me, it'll work just fine for what we want it for); these settings will prove to be useful for the content editors later on and, because of the CSS we use, this additional attribute will not affect the final rendering of the table(s). Save these templates (as .html) into a suitable location in your project.

Next we're going to create the configuration for TinyMCE to use these templates. Open up the configuration file for TinyMCE; ours looks like this:

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

        public void Uninitialize(InitializationEngine context) { }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                // Default configuration settngs go here...
            });
        }
    }

Directly under the default configuration settings we're going to clone the default settings and apply a stylesheet that contains the relevant CSS for final rendering, thus:

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
                // Default configuration settngs go here...

                // Create a simple version of tinyMce, with just the bare necessities and a template button.
                var simpleConfiguration = config.Default().Clone()
                    .ContentCss("/static/css/default.css")
            });
        }

Next, let's add the settings for the two templates and add these settings as a plugin, thus:

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                // Default configuration settngs go here...

                // Create a simple version of tinyMce, with just the bare necessities and a template button.
                var simpleConfiguration = config.Default().Clone()
                    .ContentCss("/static/css/default.css")
                    .AddSetting("templates", new[]
                    {
                        new
                        {
                            title = "Downloads template 1",
                            url = "/static/html/templates/template1.html",
                            description = "Template 1 for a preformed table"
                        },
                        new
                        {
                            title = "Downloads template 2",
                            url = "/static/html/templates/template2.html",
                            description = "Template for a preformed table"
                        }
                    })
                    .AddPlugin("template")
            });
        }

Note that the settings name should be 'templates' and that the plugin name should be 'template', this is IMPORTANT.

Finally, let's setup the toolbar and apply our simple TinyMCE configuration to a page type that's going to use it, thus:

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                // Default configuration settngs go here...

                // Create a simple version of tinyMce, with just the bare necessities and a template button.
                var simpleConfiguration = config.Default().Clone()
                    .ContentCss("/static/css/default.css")
                    .AddSetting("templates", new[]
                    {
                        new
                        {
                            title = "Template 1",
                            url = "/static/html/templates/template1.html",
                            description = "Template 1 for a preformed table"
                        },
                        new
                        {
                            title = "Template 2",
                            url = "/static/html/templates/template2.html",
                            description = "Template 2 for a preformed table"
                        }
                    })
                    .AddPlugin("template")
                    .Toolbar("bold italic | undo redo | template");

                // Assign this simple tinyMce configuration to the required XhtmlString property
                // on the required model.
                config.For<YourPageType>(x => x.YourPropertyName, simpleConfiguration);
            });
        }

And that's it folks! Let's compile our code and see how it renders in edit mode in the CMS:

fig.1

Note the simple toolbar configuration with the new template button.

fig.2

When the content editor clicks on the new template button they will be presented with a new modal window, which allows them to select a template to use.

fig.3

With the template selected the content editor is ready to enter their data. Hey, but what's with that extra toolbar and where did it come from? Well, because the template HTML contains a table, TinyMCE has detected this and has provided us with tools to be able to set the table properties, delete the table, add a new row above the current row in scope, add a new row beneath the current row in scope, delete the current row in scope, add a new column to the right of the current column in scope, add a new column to the left of the current column in scope and delete the current in scope, respectively.

Needless to say, the content editors can edit the table title and column headings to their own requirements and can enter multiple table templates should they desire.

Note that because we used the old 'cellpadding="10"' attribute on the table tag in our template HTML, the cells are 'padded' so the content editor has a clearer, less cluttered view of where their data is to go. This setting is NOT carried over to the final rendering of the table, if your CSS file has correctly defined the table rendering of course. As an extra aid a content editor may (temporarily) set the border attribute for the table to "1"; this can be set in the 'border' attribute of the table properties toolbar item but it will need to be deleted/set to "0", when they've finished editiing the table data, as this setting WILL carry over to final rendering.

fig.4

Final rendering.

Conclusion

This solution provides a really lightweight, simple-to-use alternative to having to use a block to acheive the same result. I'd like to pay tribute to the article I found at https://davidboland.site/blog/create-episerver-tinymce-default-templates for giving me the inspiration for this solution.

Feedback to this post will be welcomed and appreciated.

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

Fri, 26 Feb 2021 11:02:18 GMT

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

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.