Font Family

Offers the flexibility to select a font family for highlighted text, personalizing the typographic style.

Select some text and click the 'Font' button on the toolbar.


<!DOCTYPE html>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/fontfamily/fontfamily.js"></script>

        <!-- call -->
        Redactor('#entry', {
            plugins: ['fontfamily']


By default, the plugin already has a set of fonts installed. You can set your own set this way:

Redactor('#entry', {
    plugins: ['fontfamily'],
    fontfamily: {
        items: ['Inter', 'Fira Sans', 'Monospace']

Work with classes

The plugin can work with classes. In this case font family is set as the class, not as a style.

Redactor('#entry', {
    plugins: ['fontfamily'],
    fontfamily: {
        classes: ['font-serif', 'font-mono']

To display fonts in the editor content, you will need to add a font style statement to the page where the editor is running, for example, like this:

.rx-content .font-serif {
    font-family: 'PT Serif', 'Times New Roman', sans-serif;
.rx-content .font-mono {
    font-family: 'Menlo', monospace;