Digging through the forum on dynamic fonts, I found a few clues on how to do this, but never the full answer. I was able to get something working that fit my use case and wanted to post it all here to help others and improve upon it. Please let me know if you find room for improvement; it took me a lot of trial and error playing with code! Hopefully the Bubble platform will support this use case soon, but until then I hope this helps.
Link to demo: Dynamic fonts on Bubble | No-code apps
Link to demo editor: Dynamic fonts | Bubble Editor
Step 1 - Create a place for dynamic font records in the database
- Create a new DB field to capture user inputs for Font name (if sticking to just Google Fonts you’re finished here and move to Step 2).
- If enabling users to upload their own fonts, create new database field(s) to host the font file(s) and the name of the font. For the name of the font I just use the name of the file uploaded instead of a user input, but requires both files to have the same name.
- Hosting both WOFF and WOFF2 files for each font appears to cover most, but not all, modern browsers. You can learn more about additional font files that may apply to your users here.
Step 2 - Select the text elements you want a dynamic fonts to apply to
You may want to apply the same font to all text on the entire page, in which case nothing more to do here and move on to step 2. Otherwise you may want to apply one font for some text items such as headers and another font to others such as subheaders, and/or keep other text elements font style unchanged from the Bubble editor font.
- To apply different fonts you identify the text elements to apply a font to with a CCS Class
- Add a plugin to give CSS Class to each text element (I’m using Classify)
- In app Settings → General tab, enable "Expose the option to add an ID attribute to HTML elements”
- In the text element ID input, Add CSS Class that you want to give a customer font per instructions from Classify plugin (e.g., {addClass: “header”} )
- Repeat this with same name for each text element you want to have the same dynamic font such as “header”
- Can also repeat for other sets of text elements for another font such as “body”
Step 3 - Add some code to page headers to apply fonts to text
-
Add some code to the page headers using a plugin. I’m using CSS Tools
-
Run an action On page load to apply code, for CSS Tools it is Add/Edit Head Tags
-
For Google Fonts, connect to the source file for EACH of the Google Fonts used and then apply the font to the CSS Classes with style tags. The name “.headers” and “.body” below refer to the names for my CSS Class.
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Get the Google font name&display=swap" rel="stylesheet"> <style> .headers { font-family:”Get font name text" !important; } .body { font-family:”Get font name text" !important; } </style> -
For Custom Fonts. The name “.custom” below refers to the name for my CSS Class.
<style> @font-face { font-family: "Get dynamic font name text"; font-style: normal; src: url('https:Get dynamic font URL for Woff 2 file') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https:Get dynamic font URL for Woff file') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } .custom { font-family:”Get font name text" !important; } </style> -
For applying font to everything on the page. Depending on whether this is a font from Google Fonts or hosted on your application, you’ll have to also include the code linking to the source file for the font as shown above for each example. In the demo app I’m already importing font sources in step 1 and step 2 on page load so all I need in step 3 is just to apply the style to everything else on the page.
<style> html body *{ font-family: "Get font name text" !important; } </style>