How to Control Font Size in Froala Editor: Complete Guide to Pixel-Precise Typography

Precise typography is fundamental to professional document design. Froala’s font sizing controls give you pixel-level accuracy and flexible unit options, ensuring your typography remains consistent and intentional across every page. From responsive layouts that adapt seamlessly to different screens, to accessible contrast ratios that meet accessibility standards, to maintaining visual harmony across devices — Froala delivers the typographic control you need for polished, professional results.

In this article, we’ll explore the Froala editor’s powerful font sizing capabilities — including options, methods, and events that developers can leverage to give end-users precise typographic control.

Whether you’re building a content management system, a blogging platform, or a collaborative writing tool, mastering these features enables you to deliver a seamless, professional editing experience.

Key Takeaways

• Use fontSize to define a custom set of sizes aligned with your brand guidelines and design system.

• Control units with fontSizeUnit to ensure responsive, accessible typography across devices.

• Display selected text sizes on the toolbar with fontSizeSelection for real-time user feedback.

• Leverage command.before and command.after events to implement custom logic around font size changes.

• Ensure the Font Size plugin is enabled and properly configured in your editor setup.

Froala Font Size Option

The Froala editor provides multiple font size options that cater to different design needs and user preferences.

Set Font Sizes

The fontSize option allows developers to define a custom set of font sizes available to end-users in the editor. This gives you precise control over the typographic choices permitted within your application.

By specifying exact pixel values or relative units, you ensure typographic consistency while preventing users from applying arbitrary sizes that could break your design system.

PRO tip: Consider using predefined ranges that align with your brand guidelines — perhaps 12px for body text, 16px for leads, and 24px for headings.

new FroalaEditor('div#froala-editor', { 
    fontSize: [12, 18, 32],
 });

Set Font Size Units

The fontSizeUnit option allows you to control the default font size unit used in your editor, whether that’s pixels, points, ems, rems, or percentages for maximum flexibility and responsive design compatibility.

With fontSizeUnit: ‘rem’, your typography scales responsively across all devices while maintaining accessible, scalable text sizing throughout your application.

This approach ensures that users can adjust text sizes based on their preferences without compromising the overall design integrity or visual hierarchy of your content documents and layouts.

new FroalaEditor('div#froala-editor', {
    fontSize: [12, 18, 32],
    fontSizeUnit: 'pt',
});

Display Selected Text Font Size On The Editor Toolbar

The fontSizeSelection option enhances usability by displaying the current font size of selected text directly on the editor toolbar. When set to true, users can instantly see what size is applied to their text without hunting through the code view option.

This real-time feedback improves editing efficiency and helps users maintain consistent typography throughout their document.

new FroalaEditor('div#froala-editor', {
    fontSizeSelection: true,
    fontSize: [12, 18, 32],
    fontSizeUnit: 'pt',
});

Set The Default Font Size Of The Editor

Another important option is fontSizeDefaultSelection. This option sets the default font size applied when users begin typing new content or add unstyled text to the editor.

By establishing a sensible baseline font size, developers ensure that new content maintains visual consistency without requiring constant user intervention or manual formatting corrections.

It is important to note that when a user presses Enter to create a new line, the editor automatically inherits the formatting of the previous line. This behavior ensures consistent typography throughout the document without requiring manual formatting adjustments.

new FroalaEditor('div#froala-editor', {
    fontSizeDefaultSelection: "12pt",
    fontSizeSelection: true,
    fontSize: [12, 18, 32],
    fontSizeUnit: 'pt',
});​

PRO TIP: Keep Font Size Format When Text Deleted

Froala’s keepFormatOnDelete option preserves text formatting when content is deleted. When enabled, the editor maintains the formatting of deleted text and applies it to any new content you type immediately afterward.

Example: If you format text to 32px, then delete it and begin typing again, the new text automatically inherits the 32px size — even if your default font size is set to a different value.

This feature streamlines editing workflows by eliminating the need to reapply formatting after deletions, ensuring consistent typography throughout your document without manual intervention.

new FroalaEditor('div#froala-editor', {
    fontSizeDefaultSelection: "12pt",
    fontSizeSelection: true,
    fontSize: [12, 18, 32],
    fontSizeUnit: 'px',
    keepFormatOnDelete: true
});

Froala Font Size Methods

Apply Font Size to Text

The fontSize.apply method programmatically applies a specific font size value to the selected text withinthe Froala editor instance. This is useful when you need to apply consistent formatting programmatically based on user actions or document requirements within your application. For example, you might automatically set all headings to 28px or ensure body paragraphs maintain a readable 16px baseline throughout.

Froala Font Size Related Events

You can use the command.before and command.after events to execute custom logic before or after font size changes occur. By validating that the triggered command is fontSize, you can intercept these events and implement application-specific behavior.

Before font size changes, use command.before to:

• Validate the current text selection

• Check document constraints or business rules

• Prompt users for confirmation before applying modifications.

After font size changes, use command.after to:

• Update the UI to reflect the new font size.

• Log formatting changes for audit trails

• Trigger validation routines

• Synchronize modifications across collaborative editing sessions
  

const editor = new FroalaEditor('div#froala-editor', {
  toolbarButtons: ['fontFamily', 'fontSize', 'html'],
  fontSize: [12, 16, 24, 32],
  fontSizeUnit: 'px',
  events: {
    'commands.before': function (cmd, size) {
      // Do something here
      if (cmd === 'fontSize') {
        // this is the editor instance.
        const selectedText = this.selection.text();

        // Enforce business rule: prevent sizes over 24px
        if ( parseInt(size, 10) > 24) {
          alert('Font size cannot exceed 24px per brand guidelines');
          return false;
        }
      }
    },
    'commands.after': function (cmd, size) {

      if (cmd === 'fontSize') {
        // Log the change for audit trail
        console.log('Font size changed to:', size);

        // Update custom UI element
       // document.getElementById('current-size').textContent = size;

        // Trigger validation
        validateDocumentFormatting();

        // Sync to collaborative session (example)
        syncChangesToCollaborators({
          action: 'fontSize',
          value: e.args[0],
          timestamp: new Date(),
        });
      }
    },
  },
});

These events give developers the hooks needed to implement custom logic, maintain data integrity, and create a polished editing experience for end-users.

Froala Font Size Plugin

The font sizing options, methods, and events described above are only available when the Font Size plugin is enabled in your Froala editor instance.

Including the Font Size Plugin

If you’re using a custom Froala build (not the pre-packaged .pkgd version), you’ll need to explicitly include the Font Size plugin script:

https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/font_size.min.js

Once included, the plugin activates automatically.

Verifying Your Configuration

If you’re customizing your editor setup, confirm these settings are properly configured:

• pluginsEnabled — Ensure fontSize is included in this array

• pluginsDisabled — Verify fontSize is not listed here

• toolbarButtons — Confirm fontSize appears in your toolbar configuration

FAQ

Can I set custom font sizes for different user roles?

Yes. Define your fontSize array with specific values, then conditionally render the editor with different configurations based on user permissions.

What happens if a user’s browser doesn’t support a font size unit I specify?

Modern browsers support px, pt, em, rem, and %. Stick to these standard units and test across your target browsers to ensure compatibility.

Can I prevent users from making text too large or too small?

Yes. Control available sizes by defining your fontSize array with only the sizes you want to permit in your application.

Why isn’t the font size toolbar button appearing?

Verify the Font Size plugin is included, fontSize is in your pluginsEnabled array, and fontSize is listed in your toolbarButtons configuration.

How do I undo a font size change?

Users can press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo formatting changes, just like any other edit.

Conclusion

Mastering Froala’s font sizing capabilities empowers you to deliver professional, accessible typography throughout your application. Whether you’re defining brand-aligned sizes, ensuring responsive scaling, or maintaining consistent formatting across collaborative editing sessions, these tools give you the precision and flexibility needed for polished document design.

This article was published on the Froala blog.