---
title: How to Add Custom Font Family
description: Add custom fonts to the Jodit editor font list.
keywords: custom font, font family, jodit fonts
---

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

By default, Jodit only shows such fonts:

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

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:

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

For Jodit React it would be like this

```jsx
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} />;
};
```

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

`{example FontFamilyAdd}`

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:

```js
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'
			})
		}
	}
});
```

`{example FontFamily}`