Issue #2934Opened August 3, 2020by jayeshmotwani2 reactions

BUG: Changing the font inside top panel is disturbing the font-awesome icons

Question

Hello, I am using Montserrat google font. Ater trying so many things, finally I was able to set the font using following way:

.gjs-pn-buttons > span{ font-family: "Montserrat", sans-serif; }

But when I do this, the font is changed but the font-awesome icons are not working.

Please refer the following screenshot for more details. This is how it looks after I changed the font. Grapesjs Font change issue

Thanks for your help.

Answers (2)

mcottretAugust 24, 20201 reactions

Hi @jayeshmotwani !

Font Awesome relies on the font-family attribute for its icons, & since your selector also targets these icons in addition to the text, Font Awesome's font-family gets overridden by yours, which breaks its icons.

I'd recommend using a different selector that would only target the text you're interested in modifying the font of & not GJS' icons.

Cheers !

jayeshmotwaniAugust 25, 20201 reactions

@mcottret Thanks for your reply.

I fixed this by adding the label text inside a tag and given my custom font to that particular tag only, instead of entire <span> of button.

Cheers!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.