Issue in adding custom font in grapejs
Just do this and you should never doing this styleManager.render()
Read full answer below ↓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...
Answers (3)
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()
Just do this 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 t...
is it the right method to import external css that i want to preload in the editor??
Yeah, you're doing it right, you should see it. Check your font is loading correctly (wrong path, browser compatibility with .otf, etc.)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3213
How to save the dynamically added traits
Hi, @artf, I have a custom component that has a button trait. When the button is pressed, I am adding a custom trait dynamically using comp...
Issue #3119
How to create custom block made of grapesjs components?
Hi, i want to have custom blocks made of grapesjs components. I found solution how to add components: https://github.com/artf/grapesjs/issu...
Issue #3111
How to trigger something (function) on adding asset?
Hi, @artf. What is the correct way to trigger a function when an asset is added to the assets by providing the link and then pressing the '...
Issue #2715
I have added the custom font using the method below but that font is only working in few cases
There is one font issue when i click on any element it not show the current font of the element, i added custom code for add my custom font...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
Tutorial
Lighthouse for GrapesJS: Audit Accessibility and SEO Without Leaving the Editor
Live WCAG 2.1/2.2 accessibility auditor + SEO manager for GrapesJS. Every finding is bound to the exact component — click to select, then one-click fix.
Tutorial
How to integrate GrapesJS into a Django app (complete guide 2026)
Embed GrapesJS in a Django project: render the editor in a template, persist content to a view with CSRF, store the project JSON, and export HTML/CSS.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.