Issue #1215Opened June 18, 2018by ogousseau1 reactions

[Question]Adding Google Font doesn't work

Question

Bonjour,

I try to add Google Font :

var editor = 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'],
        },
    });


    editor.on('load', function () {
        styleManager = editor.StyleManager;
        typographySector = styleManager.getSector('Typography');
        fontProperty = styleManager.getProperty('Typography', 'font-family');
        list = fontProperty.get('list');
        list.push({ value: 'Roboto, Arial, sans-serif', name: 'Roboto' });
        fontProperty.set('list', list);
        styleManager.render();
    });

When i click on Typography, script stop in Grapes.jp show: function show() { this.$el.addClass(this.pfx + 'open'); this.getPropertiesEl().style.display = ''; <=== style is null ? this.$caret.removeClass(this.caretR).addClass(this.caretD); },

Where it's wrong ?

Merci.

Answers (3)

artfJune 20, 20181 reactions

I think the real issue here is a need to have methods like

fontProperty.addOption({ value: 'Roboto, Arial, sans-serif', name: 'Roboto' })
// or
fontProperty.setOptions([...])

which then update the view accordingly to the change. So I'll add them for the next release. For now, declare your Style Manager in init configuration object or try with something like this

...
fontProperty.set('list', list);
fontProperty.view.input = null;
fontProperty.view.onRender();
// styleManager.render();
ogousseauJune 20, 20180 reactions

Super merci. !!!!!!

lock[bot]September 17, 20190 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.