About this plugin

Links

The plugin currently has these features

API to add / remove fonts from the site (from goole font name)
Updates the DOM and the "font family" dropdown
Save the fonts with the site data
Load the fonts when site data is loaded (add to the DOM on load)
UI to manage fonts
Integration with google API
Store google fonts list in local storage for performance and API quotas

Limitations:

For now this plugin supports only Goolge fonts and use the V2 API. It should be upgraded to V3 and take advantage of variable fonts.

See the "Development" section bellow to contribute

Motivations

I saw discussions and issues like "How can i add custom fonts in grapesjs editor? #4563"

What seems to work for me is

update the "font family" dropdown

const styleManager = editor.StyleManager
const fontProperty = styleManager.getProperty('typography', 'font-family')
fontProperty.setOptions(fonts)
styleManager.render()

update the DOM to display the font correctly: add style elements to the editor.Canvas.getDocument()

This is quite easy but here are the things which took me time as I implemented google fonts

use google fonts api to select fonts and get their name, variants, weights
build the URL of the fonts to load
the UI to manage and install fonts

GrapesJS Custom Fonts

Custom Fonts

Related blog posts