How to customize the Bubble.io user interface with custom fonts and icons: Step-

Go to the Styles tab in the left sidebar. Click Style Variables. Under Font settings, click the font family dropdown. Bubble provides a built-in list of Google Fonts — scroll through or type to search. Select your desired heading and body fonts. These fonts are automatically loaded from Google's CDN when your app loads. Apply the fonts by creating Element Styles (reusable style definitions) that reference these font families. Set a heading style with your heading font and a body style with your body font.

If you need a proprietary or brand-specific font not in Google Fonts, upload it via an HTML element. Add an HTML element to your app's reusable header (so it loads on every page). Inside the HTML element, add a @font-face CSS declaration that references your font file uploaded to Bubble's file manager. Upload your font file (WOFF2 preferred for best compression) via the Data tab → File Manager. Copy the file URL. In the HTML element, declare the font-face with the family name and URL to the uploaded file. The font is then available in Bubble's font dropdown under the name you specified.

1<style>
2@font-face {
3  font-family: 'MyBrandFont';
4  src: url('YOUR_UPLOADED_FONT_URL.woff2') format('woff2');
5  font-weight: normal;
6  font-style: normal;
7  font-display: swap;
8}
9</style>

Bubble includes a built-in icon set, but for more variety, add Font Awesome. Place an HTML element in your reusable header with the Font Awesome CDN link. Once loaded, use Font Awesome icons throughout your app by adding HTML elements with the icon markup (e.g., <i class="fa-solid fa-house"></i>) or by using the Bubble Icon element if a Font Awesome plugin is installed. For a cleaner approach, install a Font Awesome plugin from the Bubble plugin marketplace that adds Font Awesome icons directly to the Icon element dropdown.

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

For brand-specific icons not in any icon library, use SVG files. Upload your SVG icons to Bubble's file manager or paste the SVG markup directly into an HTML element. SVG icons are resolution-independent and can be styled with CSS. To make SVG icons dynamic (change color based on state), paste the SVG code directly into an HTML element and use Bubble dynamic data to set the fill color. For example, set fill to a Color Variable or a conditional color based on a custom state.

Go to Styles tab → Style Variables. Define your font scale: set Heading 1 through Heading 6 sizes, body text size, small text, and caption sizes. Under each, configure font family, size, weight, line height, and letter spacing. Then create Element Styles in the Styles tab that reference these variables. For example, create a style called 'H1 Heading' with your heading font at 32px bold, and 'Body Text' with your body font at 16px regular. Apply these styles to elements throughout your app — any future changes to the style update every element using it.