Grapesjs 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

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
• Generate HTML imports for the final website
• Support Google fonts proxies, e.g fontlay and a privacy-friendly drop-in replacement for Google Fonts, e.g coollabsio's fonts server
• Generate CSS imports for the final website
• Handle variants and weights
• Google fonts V3 API

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.

Export / publication

In your app you probaly publish / export the website to a final format (html, css, js, images, etc).

You need to add the font to the final website when you publish/export it, this is not done by the plugin. You can use the provided commands get-fonts-css OR get-fonts-html to get the code to add to the final website.

// get the CSS to add to the final website
const css = editor.runCommand('get-fonts-css')
// Here css is like @import url('https://fonts.googleapis.com/css2?family=Protest+Strike&display=swap')

Or ues the get-fonts-import-html command to get the HTML to add to the final website

// get the HTML to add to the final website
const html = editor.runCommand('get-fonts-html')
// Here html is like <link href="https://fonts.googleapis.com/css2?family=Protest+Strike&display=swap" rel="stylesheet">

You can check how it is done in Silex website builder

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

Use the plugin in your website builder

HTML

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

JS

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')

CSS

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

Also you should style the dialog:

.silex-form select {
  ...
}

Options

The options api_url and server_url are used to support Google fonts proxies, e.g fontlay and a privacy-friendly drop-in replacement for Google Fonts, e.g coollabsio's fonts server. Their default values are the Google fonts API and server.

Option	Description	Default
api_key	Google fonts API key, see this doc to get an API key	Required
api_url	Fonts API	https://www.googleapis.com
server_url	Fonts server	https://fonts.googleapis.com

Download

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

Usage

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: '...',
    }),
  ],
});

Development

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

License

MIT