Skip to main content

Editor font styles

Written by James Calleja
Software Test Engineer at MindTouch
This page applies to:MindTouch Responsive

We have made improvements in how our editor creates font styling in compliance with CSS best practices.


With our editor styles changing from inline CSS to class names, we are making maintenance easier and your HTML more accessible. 

From the control panel users can: 

  • change default styles en masse.
  • create responsive custom styles that change the look and feel of their site no matter the device used to view it.
  • optimize performance by creating smaller page sizes. 
  • clean up your HTML code, making your content more accessible by search engines and text reader assistive technology.

The separation of design from content (HTML) allows developers to implement design choices quickly without having to go through every page to find and change each inline style. As web design practices change over time, it is important to stay nimble, current, and optimized. 


What changed?

Previously, font styles were handled with inline CSS:

<span style="color:#800000">Text</span>

With our implemented changes, the editor searches for similar inline CSS and replaces it with a class:

<span class="mt-color-800000" data-mt-color="1">Text</span>

Note to user   NOTE:  For pages with existing inline CSS, the inline CSS replacement takes place once the editor is opened and saved.


In this example, we are implementing the class names listed below. Keep in mind that this is not a complete list of classes.

Class Description
mt-font-size-# Replace # with a number to change the text font size.
mt-font-XXXX Replace XXXX with a desired font style. For example, mt-font-times-new-roman changes the font to times new roman.
mt-color-# Replace # with a hex color code to change the color of the text.
mt-bgcolor-# Replace with a hex color code to change the background of the text.


Below is a view of the editor in Source mode. At the bottom of the image is an example of how these classes can be used.


Returning to View mode, the phrase "TEXT CONTENT" now displays a new style.

  • Was this article helpful?