On paid plans, Glow gives you two ways to adjust loyalty widget fonts:
Use the built-in font selectors in Settings > Widget Design.
Use Settings > Custom CSS when you need a web font that is not available in the built-in selectors.
Start with the built-in font selectors whenever possible. They are easier to manage and preview than custom CSS.
Use the built-in font selectors
Go to Settings > Widget Design.
Paid-plan stores can choose separate fonts for:
Heading Font
Body Font
Button Font
There is no save button on the Widget Design page. Font changes save automatically after you change a selector, and the preview updates as the setting changes.
Refresh your storefront after changing fonts, then open the widget to check the live customer experience.
If you see an Upgrade button
Font selectors are available on paid plans. If your store is on the Free plan, Glow shows an Upgrade button in the Fonts section instead.
Use a web font with Custom CSS
Use Custom CSS only when the font you want is not available in Widget Design.
Find a web font that is publicly hosted and licensed for your store to use.
Copy the font provider's CSS
@importrule.In Glow, go to Settings > Custom CSS.
Paste the
@importrule at the top of the editor.Add font-family CSS below it.
Click Save CSS.
Do not paste <style> tags into the Custom CSS editor. Paste only the CSS.
Here is a simple Modern widget example using a Google Font:
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');#glw-widget-root,#glw-widget-root * { font-family: 'Indie Flower', cursive !important;}
The !important is intentional in this example. The Modern widget applies selected fonts directly to many elements, so a custom CSS override may need !important to take effect.
If Custom CSS is locked
Custom CSS is also available on paid plans. Free-plan stores see an Upgrade button instead of the CSS editor.
Tips for safer font CSS
Keep custom font CSS as small as possible. Broad rules can make the widget harder to read or accidentally affect icons, buttons, or spacing.
Test the widget in these places after saving:
Widget Design preview
Live storefront while logged out
Live storefront while signed in as a customer
Mobile storefront viewport
Glow Custom CSS styles the loyalty widget content. It is not the right place to style your Shopify theme or the floating launcher button outside the widget.
Troubleshooting
My font changed in the preview but not on my storefront
Refresh the storefront page and reopen the widget. Also check that the Glow app embed is enabled and the widget is allowed to load on the page you are testing.
My imported font is not loading
Make sure the @import URL is public, valid, and placed at the top of the Custom CSS editor.
If your font provider gives you an HTML <link> tag, look for the CSS @import option instead.
My Custom CSS font rule is not applying
The Modern widget uses font values from Widget Design on many elements. Try a more specific selector, or use !important carefully on the font-family rule.
I changed too much and the widget looks wrong
Remove the last CSS change, save again, and test in the storefront. Reapply changes one at a time so you can tell which rule caused the problem.
Related articles