[Question]: How do I add a custom font in the Typography | Font dropdown?

This is how i added new fonts to the style manager: Call this functions either after initialize, or on editor.on('load', ()=> { .... addFonts() ... }) if you use a preset like newsletter preset that alters the style manager after load.

addFonts = () => {
        let styleManager = this.editor.StyleManager;
        let typographySector = styleManager.getSector('Typography');
        let fontProperty = styleManager.getProperty('Typography', 'font-family');
        let list = fontProperty.get('list');
        list.push({ value: 'Roboto, Arial, sans-serif', name: 'Roboto' });
        fontProperty.set('list', list);
        styleManager.render();
    }

also, inject the used fonts in the canvas, using in the init function the canvas property :

grapesjs.init({
....
canvas: {
                styles: ['https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&subset=latin,latin-ext'],
            },
....
})

Hi @webnoob currently the only way to do so is to add it via the initialization object. Here is the snippet from the demo https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1045-L1062 As you see can see I don't specify any font family I just update its name

buildProps: ['font-family', ...],
properties:[
	{ name: 'Font', property: 'font-family'},
	...

Default fonts are taken from its PropertyFactory so if you want to add others you have to declare them all on init

buildProps: ['font-family', ...],
properties:[
	{  
		property: 'font-family',
		name: 'Font',
		list: [
			{ name: 'Arial', value: 'Arial, Helvetica, sans-serif' }
			...
		]
	},
	...

Thanks for this. Based on what you showed me above, I've used the StyleManager to add the extra font in, like so:

var styleManager = this.editor.StyleManager
            styleManager.addProperty('Typography', {
              name: 'Alternate Fonts',
              property: 'font-family',
              type: 'select',
              defaults: '',
              list: [{
                value: '',
                name: ''
              },
              {
                value: 'Bank Gothic',
                name: 'Bank Gothic'
              }]
            })

I suppose using this method I would need to import the actual font via a stylesheet into the editor for it to actually work or do you provide some other mechanism for that?