Custom Fonts

Custom Fonts plugin for grapesjs

This code is part of a bigger project: about Silex v3

About this plugin

Links

• DEMO on Codepen
• Npm package
• Discussion about ongoing developments

 

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

1. update the "font family" dropdown

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

    

2. 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