How to add a custom font to the font list in Jodit

By default, Jodit only shows such fonts:

{
  '': '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'
}
Copy

You may need to add your own font. This is done by redefining the list in controls.font.list

Append item

For Jodit, this is done like this:

const editor = Jodit.make('#editor', {
	controls: {
		font: {
			list: {
				'Roboto Medium,Arial,sans-serif': 'Roboto'
			}
		}
	}
});
Copy

For Jodit React it would be like this

import React, { useState, useRef } from 'react';
import JoditEditor from 'jodit-react';

const config = {
	controls: {
		font: {
			list: {
				'Roboto Medium,Arial,sans-serif': 'Roboto'
			}
		}
	}
};

const Example = ({}) => {
	return <JoditEditor config={config} />;
};
Copy

This font will be added to the start of the default fonts.

But what if you want to completely override the list with your fonts?

Override options

This is also done quite simply. Jodit allows you to wrap any object or array in a Jodit.atom wrapper. Such wrappers are not added to the default settings, but replace them completely:

const editor = Jodit.make('#editor', {
	controls: {
		font: {
			// Redefine font.list
			list: Jodit.atom({
				'Tahoma,Geneva,sans-serif': 'Tahoma',
				'Roboto Medium,Arial,sans-serif': 'Roboto',
				"-apple-system,BlinkMacSystemFont,'Segoe WPC','Segoe UI',HelveticaNeue-Light,Ubuntu,'Droid Sans',sans-serif":
					'OS System Font'
			})
		}
	}
});
Copy