Froala Editor v4.2.0 is Here LEARN MORE

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:

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'
String -
The text to display when the font family is unknown or nothing is selected.
Default: 'Font Family'
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

Plugin CSS link:


Font Family

Ready to dive in? Explore our plans