Custom font function doesn't work

Need help
1

Good day,

I’m using the latest version of Bubble (Oct 03, 2020).
I have tried to upload a custom font, but it did not work. Is there any issues with this function?
Here’s the screenshot and the link to the font.

https://fontlibrary.org/face/waltograph-disney

Thanks a lot !

image_2020-10-04_214934
image_2020-10-04_214934963×141 8.19 KB

1 Like
2

When you say this, does that mean it didn’t show up in any of your font pickers in text elements, etc?

3

Hi @Eugene :slight_smile:

Welcome to the Forum! The steps to upload a custom font are a little tricky - this is the current method that I use:

  1. Upload the font file itself in the Bubble editor using a file uploader:

    image
    image994×1150 54.8 KB

  2. Copy the uploaded file’s s3 address to your clipboard

    image
    image1426×1530 183 KB

  3. Create a new CSS file and paste the URL from Step 2 as the font’s source URL (here is my example using a font called Mier A Regular)

    image
    image1272×238 52 KB

  4. Save the CSS file to your computer

  5. Upload the CSS file itself in the Bubble editor using a file uploader, and copy the generated s3 URL:

    image
    image1464×858 84.4 KB

  6. In the app editor where you can add fonts, enter the Font Name as it appears in your CSS file. Then, Paste the s3 URL into the CSS file path input (that you copied from Step 5)

    image
    image1798×470 69.3 KB

  7. Click “Add Font” (The font name should be displayed in the font itself if it was uploaded correctly)

That should work, but feel free to let me know if I can clarify anything or if you have any questions! :slight_smile:

4

Hi Johnny and fayewatson,

Thanks for the instruction. I did follow the exact steps you have provided prior to my post, as I have watched this vide: https://www.youtube.com/watch?v=G60-FLjXxo0&t=346s. Seems to be a very clear explanation. In this video Waltograph style is visible as soon as the font is uploaded, which is not my case.

When I stated “It did not no work”, what I meant was that the font is visible in the font selection drop down (please see attached screenshot), but when I select it the text in the text box does not get changed to Waltograph Disney style.

image_2020-10-05_144157

I tried other existing fonts and they work fine. I believe something is wrong with this function, but not sure.

Thanks again,
Eugene

5

Hi @Eugene :slight_smile: Got it!

It looks like the font name needs to be “WaltographRegular” instead of “WALTOGRAPH DISNEY”, with the CSS file path of “https://fontlibrary.org/face/waltograph-disney”. If you re-add the font with those changes does that fix it?

6

Hi fayewatson,

Thanks a lot. It did work!
So, the lesson to learn is to open URL link to check the exact name.
Thanks a lot, again. Much appreciated.

Best regards,
Eugene

7

This topic was automatically closed after 70 days. New replies are no longer allowed.