Use external css/fonts for plugin
Question
Hi,
I have an idea for an app that I think the people in my field would find useful. Essentially, there is a framework that we use for application development but there is no UI builder for it.
It has a fairly large css/icons/svg/fonts asset folder.
What I'd like to do is be able to create a plugin that will include these assets, instead of having to add each component's styles into the markup of the blocks.
How can this be achieved?
Thanks, Paul
Answers (3)
Hi Paul, you can inject external styles in this way
const editor = grapesjs.init({
...
canvas: {
styles: ['...file1.css', '...file2.css', '...']
}
});
Fantastic! Thanks @artf
Hi @paulroberttaylor , how you have included fonts inside styles,
i am also doing same but nothing change happens
const editor = grapesjs.init({
...
canvas: {
styles: ['<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">']
}
});Related Questions and Answers
Continue research with similar issue discussions.
Issue #923
[Question]: Add a select-option to toolbar
I have read the code and only I could find out that there is only a list of ToolbarButton associated with the toolbar. I have a special tra...
Issue #574
Using Grapes with Zeronet.
Is there a way to use grapesjs with zeronet? https://zeronet.io/ You can create sites on zeronet but to add headers, banners and other thin...
Issue #501
Add custom CSS rule
Hi! I would like to add a CSS rule that, for instance, changes appearance of a component based on some attribute. I.e. Is there a way of do...
Issue #588
Editor UI changes
I would like to make the editor like the photo above. However, I can't find the css for the background or the panels. Any help provided wou...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.