Add custom font
Try using this editor.StyleManager.getProperty('typography', 'font-family')
Read full answer below ↓Question
Hello,
I went through, the following GitHub issues: #857 #1622 #1215
Almost all of the issues, though a little different, provide a way to add font family to the list.
Most common way to tackle, as far as I've understood:
let styleManager = this.editor.StyleManager;
let typographySector = styleManager.getSector('Typography');
let fontProperty = styleManager.getProperty('Typography', 'font-family');
... Add fonts then
const styleManager = editor.StyleManager;
const fontProperty = styleManager.getProperty('Typography', 'font-family');
... Add fonts then
For both of this, I'm getting the typographySector and fontProperty as undefined. I don't know, if I'm doing something incorrect or, if I'm incorrectly implementing them.
Here's my snippet, of what I'm trying.
editor.on('load', () => {
const styleManager = editor.StyleManager;
const fontProperty = styleManager.getProperty('Typography', 'font-family');
const typographySector = styleManager.getSector('Typography');
console.log({fontProperty, typographySector}); // both are returned undefined
})
Thanks for putting your time on this.
Answers (3)
Try using this editor.StyleManager.getProperty('typography', 'font-family')
Hi @ankitjainOfficial, I'm new to this so can you please help me how to add some Google fonts in detail? Thanks in advance.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2097
New views question
Hello all, Is there is any simple way to add a new view right next to the style manager? I would like to create a new view that will show s...
Issue #857
[Question]: How do I add a custom font in the Typography | Font dropdown?
Hi, First off, this is what I've been looking for for a long time so thanks for your efforts. Next, I'd like to add a font in the Typograph...
Issue #518
change only component body not whole page body.
Hello @artf As we discussed in issue #374. setComponents will set the body and replace all the contents that are present on the page with a...
Issue #987
[BUG/Question] Dropdown indicator not displayed for a custom trait
Hello, the dropdown (select) element arrow indicator icon is not rendered when adding a custom trait to a component: I'm using following co...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.