Adobe Fonts into Bubble

tristan2 · 2021-01-04T16:29:02.473Z

Has anyone managed to figure out how to take font families from adobe fonts and integrate them into their Bubble app?

Adobe fonts give you the path to bring in but it only allows you to bring the regular version of each family.

Apologies in advance for such a beginner question. I thought i’d try everything myself before reaching out and nothing seems to be working!

johnny · 2021-01-04T18:38:54.007Z

Hey @tristan2,

Check out this video by @Jeremy at Bubble Education!

tristan2 · 2021-01-04T18:51:56.801Z

Hey Johnny,

Thanks for this! I’ve checked it out. It’s super helpful, the only thing I can’t figure out is downloading an adobe font as it’s on their servers. So taking the CSS files they give me and pointing it to bubble seems tricky.

I can only add one font weight per family. And it’s only the regular weight that is available every time haha.

peter13 · 2021-01-11T15:05:30.213Z

Hi @tristan2

I’ve struggled with this myself and found a solution.

From Adobe Fonts, you should be able to copy the URL of the CSS file. If you go to that CSS file, you can copy the code, create a new CSS file on your desktop, paste the code and change the name of the font-family (eg: roc-grotesk-medium).

Afterwards, you can upload your own CSS file as described in the video. This way, your own CSS file will still point to the font files hosted on the Typekit/Adobe servers.

Hope it makes sense, please let me know if you need further assistance

Gr
Peter

tristan2 · 2021-01-12T15:51:54.998Z

Hey Peter,

Thanks for reaching out! I have managed to figure this out exactly how you described. Support managed to get back to me fairly sharpish!

Thanks for the tips, hopefully someone else will benefit from this too.

Best,
Tris

stephen14 · 2022-09-27T12:55:42.570Z

The solution didn’t really work for me so I found a slightly different way.

Watch the video as advised in the proposed solution up to 0.51 secs, where you should have successfully built an upload method for your file.
Go to your adobe font and click the embed code link (see below).

Screenshot 2022-09-27 at 13.46.59

Add to a project and then grab the url link part (see below).

Screenshot 2022-09-27 at 13.33.51638×536 28.8 KB

(1) Paste this into your web browser, (2) copy the css, (3) paste into a text editor and create a new css file from it and save it somewhere on your drive.
As in the video (and in Bubble dev mode) ‘Preview’ your upload page you’ve created and upload the css file youve just created.
Go to your ‘Data’ section in Bubble and ‘File Manager’ and notice the file youve just uploaded (refresh if its not there). Right click the file and get and copy the url link.
Go to ‘Settings’, ‘General’ (in Bubble) and find ‘Custom Fonts’ section , and add the font by pasting the in the’CSS File Path’ the CSS URL path you just copied. Make sure in the name to keep it simple in terms of the font name as I’ve found it doesnt like spaces etc. Then click ‘Add Font’. You should see it successfully added above.
You should now be able to navigate to the text and change the font.

stephen14 · 2022-09-30T15:33:22.973Z

Found an even faster way now!

Only follow steps 2. and 3. above.

Then go to ‘Settings’, ‘General’ (in Bubble) and find ‘Custom Fonts’ section , and add the font by pasting URL path as seen in 3. NOTE, the ‘Name’ has to be the same as what’s mentioned in the css file (of the url). See screenshot for an example. Any other name will not work!

Screenshot 2022-09-30 at 16.30.263489×496 48.6 KB

stephaniee · 2022-10-02T03:16:22.954Z

Fantastic - that works like a treat when uploading one style in the font family. Fast and easy.

I now need the bold version (same adobe font family), and this method doesn’t seem to work?

They have the same font family name, so this may be confusing bubble?

Do you have any tips on this?

stephen14 · 2022-10-15T11:31:52.708Z

Sorry, Stephaniee. Only just noticed this Did you find a way around this only I’d also be interested to know?