Hi everyone,
Nick here from the mobile team. Custom fonts now render in native mobile apps, and we’ve reworked how you add them so a single font works across both web and mobile.
A bit of background on how fonts have worked until now. To add a custom font, you’ve pointed Bubble at a CSS file link in Settings → General, and the browser pulled the font in from there. That works on web because browsers know how to read @font-face declarations in a CSS file. Native mobile apps don’t — they need the actual font file. So any font added through a CSS link rendered fine on web but fell back to a system default on mobile.
In practice, that left custom fonts effectively web-only. If you added a mobile app to an existing project with a brand typeface, the font wouldn’t carry over, and there was no way to fix it.
With this update, you upload the font file itself — .ttf or .otf — instead of linking a CSS file.
A few things to know:
-
You can upload a single file, several files, or a whole folder for a font family at once, and we’ll automatically recognize the family and its weights and styles from the files.
-
Uploaded fonts are available everywhere you pick a font — on elements, in styles, and in style variables — and they render identically on web and in your mobile app.
-
The font picker only offers the weights you’ve actually uploaded for a family, so you won’t end up selecting a style that has no file behind it.
-
The feature is currently enabled by default in the Settings → Versions tab
What this means for you: Fonts you’ve already added through a CSS link will keep working on web exactly as they do today — nothing breaks. Going forward, though, new fonts are added by file upload, and you’ll no longer be able to add a new font as a CSS file link. To bring an existing CSS-linked font to mobile, upload the actual font files for that family, then remove the old CSS link. You’ll then want to deploy a new build in order to see the custom font in your app.
The font file upload lives in the same spot as before, Settings → General, right above the legacy font section.
This update closes a real gap for those running a project across web and mobile, and it means your typography can finally be consistent everywhere your app lives. Give it a try and let us know how it goes in the comments — especially if you hit a font family that doesn’t auto-detect cleanly, since that’s the area we’re watching most closely.
Nick