Custom Fonts plugin for grapesjs

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

Links

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

It looks like this:

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

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

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@silexlabs/grapesjs-fonts"></script>

<div id="gjs"></div>

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['@silexlabs/grapesjs-fonts'],
});

This will make sure the fonts are saved and loaded with the website data

Here is how to open the fonts dialog:

editor.runCommand('open-fonts')

And you can use the plugin's API:

// TODO

body, html {
  margin: 0;
  height: 100%;
}

Also you should style the dialog:

.silex-form select {
  ...
}

• CDN
  • https://unpkg.com/@silexlabs/grapesjs-fonts
• NPM
  • npm i @silexlabs/grapesjs-fonts
• GIT
  • git clone https://github.com/silexlabs/grapesjs-fonts.git

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-fonts.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['@silexlabs/grapesjs-fonts'],
      pluginsOpts: {
        '@silexlabs/grapesjs-fonts': {
          api_key: '...',
        }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from '@silexlabs/grapesjs-fonts';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      api_key: '...',
    }
  }
  // or
  plugins: [
    editor => plugin(editor, {
      api_key: '...',
    }),
  ],
});

Clone the repository

$ git clone https://github.com/silexlabs/grapesjs-fonts.git
$ cd grapesjs-fonts

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

MIT