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. also, inject the used fonts in the canvas, using in the init function the canvas pr...
Read full answer below ↓Question
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 Typography | Dropdown list. How do I go about adding one?
Note: I've seen the posts where you suggest adding a new stylesheet but I want it to only apply as per the Typography options. I also saw you added support for atRules but I don't think this will add an option to the font dropdown and also can't find the documentation on it ...
Thanks for your time.
Answers (3)
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?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1078
add custom date time picker for countdown
For countdown we would like to add our custom datetime picker not just the html one.We tried adding click event in its trait this way trait...
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
Issue #1940
[QUESTION] Add custom font
Hello, I went through, the following GitHub issues: #857 #1622 #1215 Almost all of the issues, though a little different, provide a way to...
Issue #1622
Default selected font issue for custom font in the Typography.
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.