How to Add Custom Fonts in Bubble.io

Quick summary

Adding custom fonts in Bubble.io involves uploading font files through the File Manager and applying them via the Styles editor. This no-code approach lets you replace default fonts like Gilroy with custom typefaces such as Poppins without writing any CSS from scratch.

Steps

1. Click Settings to access the visual editor and start customizing your application's appearance.
2. Navigate to the SEO and Metatags section.
3. Scroll down to Advanced Settings and find the Script/meta tags in header field.
4. Modify text formatting to enhance visual hierarchy and readability.
5. Open additional design tools by clicking the Data tab.
6. Access the File Manager to upload and manage custom assets.
7. Select the Upload button to add custom fonts to your application.
8. Watch as your custom font file uploads to your application.
9. View your uploaded Poppins font file in the asset library.
10. Return to the editor by clicking the Styles tab to apply your newly added custom font.
11. Select the placeholder text element to modify its appearance.
12. Change from the default Gilroy-Regular font to your custom font.
13. Open the font selector to view all available typography options.
14. Navigate your font library and apply the Poppins font to give your design a fresh, modern look.