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/froala-editor@latest/js/plugins/font_family.min.js
Plugin CSS link: