Font Plugin
- Features- defaultFontSizePoints
- Control Configuration: fontsize
- Control Configuration: font
- Basic Usage
- Custom Font Size List
- Custom Font Family List
- Using Points Instead of Pixels
- Programmatic Usage
- Custom Font Size with Different Units
- Plugin Initialization
- Font Size Application
- Font Family Application
- Active State Detection
- Font Availability Detection
- fontsize
- fontname
 
- Edge Cases
- Notes
Provides font family and font size controls for the Jodit editor. This plugin registers two buttons (font and fontsize) that allow users to change the font family and font size of selected text.
Features
- Apply font family to selected text
- Apply font size to selected text
- Customizable font family list with font preview
- Customizable font size list
- Shows current font family and size in toolbar
- Automatic font availability detection
- Normalizes font size values to px or pt
- Highlights active font family/size in dropdown
defaultFontSizePoints
Type: 'px' | 'pt'
Default: 'px'
Specifies the unit for font size values. Can be either pixels ('px') or points ('pt').
Example:
const editor = Jodit.make('#editor', {
    defaultFontSizePoints: 'pt'
});
Control Configuration: fontsize
The fontsize control can be customized through the controls configuration:
Properties:
- command:- 'fontsize'- The command to execute
- list: Array of font size values (numbers)
- textTemplate: Function to format the button text
- childTemplate: Function to format dropdown items
- tooltip: Tooltip text for the button
- data.cssRule: CSS property name (- 'font-size')
- data.normalise: Function to normalize font size values
Default list: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 32, 34, 36, 48, 60, 72, 96]
Control Configuration: font
The font control can be customized through the controls configuration:
Properties:
- command:- 'fontname'- The command to execute
- list: Object mapping font families to display names
- textTemplate: Function to format the button text
- childTemplate: Function to format dropdown items with font preview
- tooltip: Tooltip text for the button
- data.cssRule: CSS property name (- 'font-family')
- data.normalize: Function to normalize font family values
Default list:
{
    '': 'Default',
    'Arial, Helvetica, sans-serif': 'Arial',
    "'Courier New', Courier, monospace": 'Courier New',
    'Georgia, Palatino, serif': 'Georgia',
    "'Lucida Sans Unicode', 'Lucida Grande', sans-serif": 'Lucida Sans Unicode',
    'Tahoma, Geneva, sans-serif': 'Tahoma',
    "'Times New Roman', Times, serif": 'Times New Roman',
    "'Trebuchet MS', Helvetica, sans-serif": 'Trebuchet MS',
    'Helvetica, sans-serif': 'Helvetica',
    'Impact, Charcoal, sans-serif': 'Impact',
    'Verdana, Geneva, sans-serif': 'Verdana'
}
Basic Usage
The plugin is enabled by default and provides toolbar buttons for font family and font size:
const editor = Jodit.make('#editor');
// Font and fontsize buttons are available in the toolbar
Custom Font Size List
const editor = Jodit.make('#editor', {
    controls: {
        fontsize: {
            list: [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32]
        }
    }
});
Custom Font Family List
const editor = Jodit.make('#editor', {
    controls: {
        font: {
            list: {
                '': 'Default',
                'Helvetica, sans-serif': 'Helvetica',
                'Arial, Helvetica, sans-serif': 'Arial',
                'Georgia, serif': 'Georgia',
                'Impact, Charcoal, sans-serif': 'Impact',
                'Tahoma, Geneva, sans-serif': 'Tahoma',
                "'Times New Roman', Times, serif": 'Times New Roman',
                'Verdana, Geneva, sans-serif': 'Verdana'
            }
        }
    }
});
Using Points Instead of Pixels
const editor = Jodit.make('#editor', {
    defaultFontSizePoints: 'pt',
    controls: {
        fontsize: {
            list: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36]
        }
    }
});
Programmatic Usage
const editor = Jodit.make('#editor');
// Apply font size
editor.execCommand('fontsize', false, '16px');
// Apply font family
editor.execCommand('fontname', false, 'Arial, Helvetica, sans-serif');
Custom Font Size with Different Units
const editor = Jodit.make('#editor', {
    defaultFontSizePoints: 'px'
});
// The plugin will normalize the size value
editor.s.select();
editor.execCommand('fontsize', false, '20');
// Result: font-size: 20px
Plugin Initialization
- Button Registration: The plugin registers two toolbar buttons: fontandfontsize
- Command Registration: Registers command handlers for fontsizeandfontnamecommands
- Icon Setup: Loads SVG icons for both buttons
Font Size Application
When the fontsize command is executed:
- 
Normalization: The size value is normalized using normalizeSize():- Adds the unit suffix (px or pt) based on defaultFontSizePointsconfiguration
- If the value already has ptsuffix and the config usespt, the suffix is preserved
- Otherwise, the configured unit is appended
 
- Adds the unit suffix (px or pt) based on 
- 
Style Commit: Applies the style using editor.s.commitStyle():- Sets the fontSizeCSS property on selected text
- Wraps selected text in appropriate elements if needed
- Preserves existing formatting
 
- Sets the 
- 
Synchronization: Calls editor.synchronizeValues()to update the editor state
Font Family Application
When the fontname command is executed:
- 
Style Commit: Applies the style using editor.s.commitStyle():- Sets the fontFamilyCSS property on selected text
- Wraps selected text in appropriate elements if needed
 
- Sets the 
- 
Synchronization: Updates the editor state 
Active State Detection
Font Size:
- Reads the font-sizeCSS property from the current selection
- Compares with values in the listconfiguration
- Normalizes values for comparison (removes pt suffix if configured)
- Highlights the matching size in the dropdown
Font Family:
- Reads the font-familyCSS property from the current selection
- Normalizes values by:
- Converting to lowercase
- Removing quotes
- Replacing non-alphanumeric characters with commas
 
- Compares normalized values to determine active state
Font Availability Detection
For the font family dropdown, the plugin checks if fonts are available:
- Uses document.fonts.check()API to verify font availability
- Excludes fonts with "dings" in the name (like Wingdings)
- If available, applies the font family to the dropdown item for preview
- Falls back to default rendering if detection fails or font is unavailable
fontsize
Applies font size to the selected text.
Syntax:
editor.execCommand('fontsize', false, size);
Parameters:
- size(string): The font size value (e.g., '16px', '12pt', or '14')
Example:
editor.s.select(); // Select some text
editor.execCommand('fontsize', false, '18px');
fontname
Applies font family to the selected text.
Syntax:
editor.execCommand('fontname', false, fontFamily);
Parameters:
- fontFamily(string): The font family value (e.g., 'Arial, Helvetica, sans-serif')
Example:
editor.s.select(); // Select some text
editor.execCommand('fontname', false, 'Georgia, serif');
Edge Cases
- 
No Selection: If no text is selected, the font/size will be applied to newly typed text at the cursor position 
- 
Partial Selection: When only part of text with varying fonts/sizes is selected, the plugin applies the new value to the entire selection 
- 
Nested Styles: The plugin properly handles nested font styles, replacing inner styles with the new value 
- 
Invalid Font Families: Font families that don't exist on the system will fall back to the browser's default font 
- 
Font Detection Failures: If document.fonts.check()fails or is not supported, the dropdown items won't show font preview but will still function
- 
Unit Conversion: The plugin doesn't convert between px and pt; it applies the configured unit to numeric values 
- 
Removing Font Styles: Selecting the default (empty) option from the font dropdown removes the font-family style 
- 
Block Elements: Font styles are applied to inline elements; block-level formatting is preserved 
Notes
- The plugin uses commitStyle()which intelligently applies inline styles without breaking block structure
- Font sizes in the list are numbers; the plugin automatically appends the configured unit (px or pt)
- The font family normalization ensures consistent comparison even with different quote styles or spacing
- Font availability detection uses modern browser APIs and gracefully degrades in older browsers
- The plugin doesn't validate if font sizes are reasonable; you can include any numeric values in the list
- Custom font families should include appropriate fallback fonts for better cross-platform compatibility
- The button state shows the computed font size/family at the current cursor position or selection
- Both controls support custom textTemplateandchildTemplatefor advanced UI customization
font
font(editor): void
Process commands fontsize and fontname
Parameters
| Name | Type | 
|---|---|
| editor | IJodit | 
Returns
void
Defined in
jodit/src/plugins/font/font.ts:22