issue in adding custom font in grapejs

Question

@artf i have followed the method below and successfully added the font in list but not all of the fonts are showing correct behavior, I want to add Avenir font in the system , When i added them it is not changing the font to Avenir but giving it some default value

editor.on('load', function () { styleManager = editor.StyleManager; fontProperty = styleManager.getProperty('Typography', 'font-family'); var list = []; fontProperty.set('list', list); list = [ fontProperty.addOption({value: "'Oswald', sans-serif", name: 'Oswald'}), fontProperty.addOption({value: "Helvetica Neue,Helvetica,Arial,sans-serif", name: 'Helvetica'}), fontProperty.addOption({value: "sans-serif", name: 'sans-serif'}), fontProperty.addOption({value: "Times New Roman", name: 'Times New Roman'}), fontProperty.addOption({value: "Arial Black", name: 'Arial Black'}), fontProperty.addOption({value: "'Avenir Book', Avenir", name: 'Avenir Book'}), fontProperty.addOption({value: "'Avenir Medium', Avenir", name: 'Avenir Medium'}), fontProperty.addOption({value: "'Avenir Roman', Avenir", name: 'Avenir Roman'}), fontProperty.addOption({value: "'Montserrat', sans-serif", name: 'Montserrat'}), fontProperty.addOption({value: "'Oswald', sans-serif", name: 'Oswald'}), fontProperty.addOption({value: "'Shadows Into Light', cursive", name: 'Shadows Into Light'}), fontProperty.addOption({value: "'Pacifico', cursive", name: 'Pacifico'}), fontProperty.addOption({value: "Tahoma", name: 'Tahoma'}), fontProperty.addOption({value: "Verdana, Geneva, sans-serif", name: 'Verdana'}), fontProperty.addOption({value: "Courier New Courier, monospace", name: 'Courier New Courier'}), fontProperty.addOption({value: "'Lato', sans-serif", name: 'Lato'}), fontProperty.addOption({value: "'Open Sans', sans-serif", name: 'Open Sans'}), fontProperty.addOption({value: "'Montserrat', sans-serif", name: 'Montserrat'}), ]; fontProperty.set('list', list); styleManager.render(); });


_Originally posted by @hgphpdev in https://github.com/artf/grapesjs/issues/857#issuecomment-443104577_

Answers (3)

artf• April 20, 20205 reactions

Just do this

const prop = editor.StyleManager.getProperty('typography', 'font-family');
prop.set('options', [
    {value: "'Oswald', sans-serif", name: 'Oswald'},
	...
]);

and you should never doing this styleManager.render()

Sameedkhan25• April 21, 20200 reactions

Just do this

const prop = editor.StyleManager.getProperty('typography', 'font-family');
prop.set('options', [
    {value: "'Oswald', sans-serif", name: 'Oswald'},
	...
]);

and you should never doing this styleManager.render()

@artf thanku so much for this

i have replaced my code with this

i have successfully listed the fonts in the editor as show in the screenshot, but i want to add external CSS file to add local font in the editor. currently i m using the following method attached in screenshot.

is it the right method to import external css that i want to preload in the editor?? right now when i select this avenir font it is not changing to avenir