Grapesjs: [Question]: How do I add a custom font in the Typography | Font dropdown?

Created on 11 Feb 2018 · 5Comments · Source: artf/grapesjs

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.

outdated

Source

webnoob

Most helpful comment

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'],
            },
....
})

IceCrystal0k on 15 May 2018

👍3

All 5 comments

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' }
            ...
        ]
    },
    ...

artf on 13 Feb 2018

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?

webnoob on 13 Feb 2018

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'],
            },
....
})

IceCrystal0k on 15 May 2018

👍3

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 fonts.
code work perfectly but it not show the selected font by default when i select an paragraph or any text.

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: "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();
});