https://github.com/silexlabs/grapesjs-fonts
GrapesJS plugin to add custom fonts, with an optional UI for your users to manage their custom fonts
https://github.com/silexlabs/grapesjs-fonts
grapesjs grapesjs-plugin
Last synced: 19 days ago
JSON representation
GrapesJS plugin to add custom fonts, with an optional UI for your users to manage their custom fonts
- Host: GitHub
- URL: https://github.com/silexlabs/grapesjs-fonts
- Owner: silexlabs
- License: mit
- Created: 2023-01-17T14:53:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-03T00:56:55.000Z (22 days ago)
- Last Synced: 2025-05-06T00:18:30.638Z (19 days ago)
- Topics: grapesjs, grapesjs-plugin
- Language: JavaScript
- Homepage:
- Size: 624 KB
- Stars: 31
- Watchers: 4
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Grapesjs Fonts
Custom Fonts plugin for grapesjs
> This code is part of a bigger project: [about Silex v3](https://www.silexlabs.org/silex-v3-kickoff/)
## About this plugin
Links
* [DEMO on Codepen](https://codepen.io/lexoyo/full/zYLWdxY)
* [Npm package](https://www.npmjs.com/package/@silexlabs/grapesjs-fonts)
* [Discussion about ongoing developments](https://github.com/artf/grapesjs/discussions/4858#discussioncomment-4756119)
It looks like this:
The plugin currently has these features
* [x] API to add / remove fonts from the site (from goole font name)
* [x] Updates the DOM and the "font family" dropdown
* [x] Save the fonts with the site data
* [x] Load the fonts when site data is loaded (add to the DOM on load)
* [x] UI to manage fonts
* [x] Integration with google API
* [x] Store google fonts list in local storage for performance and API quotas
* [x] Generate HTML imports for the final website
* [x] Support [Google fonts proxies, e.g fontlay](https://fontlay.com/) and a [privacy-friendly drop-in replacement for Google Fonts, e.g coollabsio's fonts server](https://github.com/coollabsio/fonts)
* [ ] 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.
```js
// 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
```js
// get the HTML to add to the final website
const html = editor.runCommand('get-fonts-html')
// Here html is like
```
You can check how it is done in [Silex website builder](https://github.com/silexlabs/Silex/blob/dev/src/ts/client/publish-fonts.ts)
### 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()
```
1. 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
```html
```
### JS
```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:
```js
editor.runCommand('open-fonts')
```
### CSS
```css
body, html {
margin: 0;
height: 100%;
}
```
Also you should style the dialog:
```css
.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](https://developers.google.com/fonts/docs/developer_api#APIKey) | 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
```html
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['@silexlabs/grapesjs-fonts'],
pluginsOpts: {
'@silexlabs/grapesjs-fonts': {
api_key: '...',
}
}
});
```
Modern javascript
```js
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
```sh
$ git clone https://github.com/silexlabs/grapesjs-fonts.git
$ cd grapesjs-fonts
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source
```sh
$ npm run build
```
## License
MIT