Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Two uppercase As, one approximately four times larger than the other.

Custom font sizes in TinyMCE

Ben Long

September 9th, 2020

Written by

Ben Long
Ben Long

Category

Design & UX

After you’ve decided to enhance your products with the power and flexibility that comes with our rich text editor, and you’ve got it up and running in your applications, you’ll want to customize it to provide the best possible experience for your users.

There are so many products you can build with TinyMCE, and each scenario can demand very different UI requirements. If you’re building, say, a simple commenting feature, the ability for users to choose font size might not be a priority, but if you’re providing a more advanced content creation experience, for example, a document processor or email builder, font size might be something your users simply can’t do without.

In this article, we’ll discuss how to configure the editor with your own set of custom font sizes for users to choose from, plus how to set the default font size for the editor if required.

We’re assuming you’ve already got an instance of TinyMCE up and running and you already know how to configure the editor by modifying the initialization script.

Font size selection

The TinyMCE rich text editor comes with 7 font size options by default, ranging from 8pt to 36pt. Depending on how TinyMCE is configured, users can select a font from the menubar or toolbar (via the fontsizeselect dropdown).

A user selects a font size from the fontsizeselect toolbar menu.

The font size toolbar menu

If the fontsizeselect dropdown is not already on your toolbar, you can add it to the list of toolbar controls in your configuration; for example:

tinymce.init({
  /* ... */
  toolbar:
    "undo redo | styleselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent"
});

Define your available font sizes

The list of available font sizes is configured with the fontsize_formats option.

The default list of font sizes is:

tinymce.init({
  /* ... */
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
});

Define the available font sizes by overriding the default list - either adding to it or creating an entirely new list.

For example, you could give your users the same choice as provided by Google Docs:

tinymce.init({
  /* ... */
  fontsize_formats:
    "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt"
});

Set the default font size for the editor

If you want to change the default font size of the editor, you can configure the TinyMCE CSS using the content_css or content_style options.

For example, the following configuration will set the default font size to 14pt.

tinymce.init({
  /* ... */
  content_style: "body {font-size: 14pt;}"
});

Just remember, these styles are specific to the content inside the editor - if you want it to be the default size on the published content too, you’ll have to make sure the same style is applied to those published pages.

For more information about the use of content_css and content_style, check out our blog post on how to change the default font family and size.

Complete example

Once you’ve made these changes, the font size will be available for users to choose from. Check out the complete example on CodePen:

What next?

Also see our related articles:

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get started with a free API key - you’ll also get a 30-day trial of our premium plugins!

DesignFonts
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Text "Fonts" displayed five times, each in a different font.
    Design & UX

    Add a custom font family in TinyMCE

    by Ben Long in Design & UX
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor