Grapesjs Fonts

Custom Fonts plugin for grapesjs

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

About this plugin

Links

It looks like this:

The plugin currently has these features

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

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

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