CKEditor Font Size and Family
Adds Font Size, Font Family, Font Color, and Font Background Color dropdown buttons to CKEditor 5.
ckeditor_font
Install
composer require 'drupal/ckeditor_font:8.x-1.5'
composer require 'drupal/ckeditor_font:8.x-1.3'
Overview
The CKEditor Font Size and Family module enables font customization functionality in the CKEditor 5 WYSIWYG editor. It provides four toolbar buttons that allow content creators to apply various font styles, sizes, and colors to their text.
The module adds Font Size and Font Family dropdowns that apply CSS styles as inline element styles. The default collection includes popular serif fonts (Times New Roman, Georgia), sans-serif fonts (Arial, Verdana, Tahoma), and monospaced fonts (Courier New). Font Color and Font Background Color pickers are also available for text styling.
Important Notice: This module is deprecated. For new sites, it is highly recommended to use the CKEditor5 Plugin Pack module maintained by the CKSource team. This module should only be used for existing sites that need to transition to other modules in the near future.
Features
- Font Size dropdown with customizable size options (supports px, em, rem, pt, % units and CSS keywords like small, medium, large)
- Font Family dropdown with serif, sans-serif, and monospaced font options
- Font Color picker for applying text colors using RGB, HSL, or hexadecimal color values
- Font Background Color picker for highlighting text with background colors (CKEditor 5 only)
- Customizable font lists for each text format
- Option to support all font size values (allows pasting content with any font size without stripping)
- Option to support all font family values (allows pasting content with any font family without stripping)
- Automatic upgrade path from CKEditor 4 to CKEditor 5 configuration
- Configurable color picker columns and document color limits
Use Cases
Adding custom font families for brand consistency
Organizations can configure specific brand fonts in the editor to ensure content creators use approved typography. Configure the Font families field with your brand fonts like 'Open Sans, sans-serif' and 'Roboto, sans-serif' to make them available in the dropdown.
Controlling font size options for accessibility
Limit available font sizes to a predefined set that meets accessibility guidelines. Configure sizes like '16px|Normal', '18px|Large', '20px|Extra Large' to ensure content maintains readable sizes and consistent styling.
Enabling text highlighting for educational content
Use the Font Background Color feature to allow content creators to highlight important text in educational materials. Configure highlight colors like '#FFFF00|Yellow Highlight' and '#90EE90|Green Highlight'.
Migrating from CKEditor 4 to CKEditor 5
The module provides automatic upgrade path for sites migrating from Drupal 9 with CKEditor 4 to Drupal 10/11 with CKEditor 5. Font and FontSize button configurations are automatically mapped to the new fontSize and fontFamily toolbar items.
Preserving pasted content formatting
Enable 'Support all Font Size values' and 'Support all Font Family values' options to preserve formatting when users paste content from external sources like Microsoft Word or Google Docs.
Tips
- Consider using web-safe fonts or ensuring custom fonts are loaded via your theme to guarantee they display correctly for all users
- Use the 'Number of columns' setting to organize color palettes in a visually appealing grid layout
- Set 'Maximum available colors' to 0 to disable the document colors feature if you want to limit users to predefined colors only
- When migrating to CKEditor 5, test the automatic upgrade by comparing font rendering before and after the migration
- For new Drupal sites, consider using the CKEditor5 Plugin Pack module instead, as this module is deprecated
Technical Details
Admin Pages 1
/admin/config/content/formats/manage/{format}
Configure CKEditor font settings for a specific text format. This page allows you to add font toolbar buttons to the editor and customize the available font options.
Hooks 1
hook_help
Provides help page content for the module at admin/help/ckeditor_font, explaining features, configuration, and usage examples.
Troubleshooting 5
Ensure you have dragged the font buttons from 'Available buttons' to 'Active toolbar' in the text format configuration. Also verify the module is enabled and the text format is using CKEditor 5.
Enable the 'Support all Font Size values' checkbox in the Font Size & Family settings. This allows the editor to preserve font sizes that are not in your configured list.
Verify your color syntax is correct. Colors must be in the format 'rgb(255,255,255)|Label' or '#000000|Label' or 'hsl(0,0%,0%)|Label'. Each color should be on a separate line.
Check that your font size syntax is correct (e.g., '16px|Normal'). Invalid syntax will prevent the configuration from saving. Ensure you're using supported units: px, em, rem, pt, or %.
The module provides automatic upgrade paths. If settings were not migrated, manually reconfigure the font options in the text format settings for CKEditor 5.
Security Notes 3
- Font styling is applied as inline CSS styles on span elements, which is standard CKEditor behavior
- The module relies on Drupal's text format filtering to ensure only allowed HTML elements and styles are rendered
- Color values are validated using regex patterns to prevent injection of malicious content