Uploaded font not loading

Need help
1

I’m trying to apply a custom uploaded font on a second page, and it’s not carrying over.

Setup:

  • I let users upload a font file (OTF) and save it to "Current User's custom_font"

  • On my main page, I use an HTML element with @font-face and apply it to elements using the ID "journal-text"

  • This works correctly on the main page — the text shows in the uploaded handwriting

Problem:

  • On my print page, the text ("Current page's JournalEntry's entry_text") shows, but it is not using the uploaded handwriting font

  • It falls back to a default font

What I’ve already done:

  • I added an HTML element on the print page with the same @font-face setup

  • I set the text element ID Attribute to "journal-text"

What I want:

  • The text on the print page to use the same uploaded handwriting font as the main page

Question:
What is the correct way to make a custom @font-face font (stored on the Current User) apply across multiple pages in Bubble?

2

@dsey3825 The problem is timing. Your print page renders the HTML element before Bubble has finished fetching Current User's custom_font, so the font URL comes through empty and the browser falls back to default.

The fix is to stop using a static HTML element and instead inject the font through a page load workflow. Set the trigger to “Page is loaded” with the condition Current User's custom_font is not empty, then add a “Run JavaScript” action:

var url = "<Current User's custom_font>";
var s = document.createElement('style');
s.innerHTML = '@font-face { font-family: "UserFont"; src: url("' + url + '"); } #journal-text { font-family: "UserFont", sans-serif !important; }';
document.head.appendChild(s);

This runs only after Bubble has resolved the user’s data, so the URL is always populated. Duplicate this workflow on every page you need the font on.

One more thing, place an invisible Text element on the page bound to Current User's custom_font. This forces Bubble to fetch that field early and makes the workflow trigger faster.

3

Thank you for your help. It worked but I have another issue