Skip to content

Font Family Plugin

Allows users to select from different font families which is set by the fontFamily option. This option is an Object where the key represents the font name (just the way you would pass it to the font-family CSS rule e.g. font-family: 'Roboto', sans-serif;) and its value is the font name that appears in the dropdown list e.g. Roboto, so, you can use it to add your custom font type either.


Plugin options:

fontFamily
Object -
Defines the fonts that appear under the Font Family button from the rich text editor's toolbar.
Default: {
'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'
}
fontFamilyDefaultSelection
String -
The text to display when the font family is unknown or nothing is selected.
Default: 'Font Family'
fontFamilySelection
Boolean -
The Font Family button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font family name for the current text selection.
Default: false

Plugin methods:

fontFamily.apply (value)
returns: Object
Set the font family of the selected text.
● value: The value of the font family.
Type: String

Add Plugin to your code:

Plugin name: fontFamily

Plugin JS Script: ../js/plugins/font_family.min.js

Or from CDN https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/font_family.min.js

Plugin CSS link:

Example:

Font Family