Custom fonts plugin

[lexoyo]

edit: this plugin is now live here

Hello

I am developing a "custom fonts" plugin for grapesjs and I need feedback and ideas

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

It looks like this:

It 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

What do you think? Is this useful? Is there too much or too few features? Is google fonts a good idea?

[artf]

Looks awesome @lexoyo 👏

[lexoyo]

This plugin is now live here

[kyr0]

Thank you @lexoyo !

[kyr0]

@lexoyo why not adding it to README.md here just like the other PR #4746 merged a few days ago? I think it would make the plugin a bit more popular and it deserves it :)

[lexoyo]

Hey thank you @kyr0 🎉

I hope it does, then someone may have an idea of how to use Google fonts v3 with support of variable fonts

I will add it like the other plugin, good idea

[lexoyo]

Done
#4877
🎆

[voleep]

Woww, so appreciate. Thank you!

[RakulAgn]

hey @lexoyo fontProperty.setOptions(fonts). is not exists in the getProperty it shows type error

Property 'setOptions' does not exist on type 'Property<PropertyProps>'.

this is want i am asking about

[lexoyo]

i answered you here already
silexlabs/grapesjs-fonts#16 (comment)