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
[QUESTION] 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
Question: 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
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
GJSDocs: Say Goodbye to Manual Document Work
Invoices, contracts, proposals, reports — all generated automatically. GJSDocs turns your template into a live document in seconds.
Tutorial
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.