@silexlabs/grapesjs-fonts
v1.0.20
Published
GrapesJS Fonts
Downloads
1,715
Readme
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
- [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 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
- 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