I am trying to install a custom Adobe Font in multiple weights. If I use the css suppled by Adobe Fonts (rather than TypeKit these days), I can select it in the Bubble style editor and apply italic, bold etc and see the results.
I have been trying to use other css files which are a subset of the Adobe supplied one, which only have the weight etc that I want, then it gets added OK in Bubble’s settings, but renders as a default font. I want to install semibold, semibold italic etc, as well as regular and medium.
I’ve spent all morning working through the guide linked by OP, however as he said, Adobe’s whole interface and platform have changed since then, and I can’t get it to work at all.
If you look inside this file, you will find a number of @font-face{} statements. Use one of these for each CSS you use for a custom font definition. So for example for omnes-pro regular, the CSS looks like this:
Note that I have overridden the font-family name in the CSS. The custom font in Bubble’s settings must have exactly the same name as the font-family (i.e. omnes-pro-regular) in the CSS.
This is what my Custom Font definitions look like in Bubble’s settings:
Hey @andrew4 , thanks for sharing! I’m trying to add an Adobe Font with multiple weights (end italicized too) but all I’m seeing on the " https://use.typekit.net/xxxxxx.css" page is the same font family for each font in it. To use your font as an example, I get just this for each one:
@font-face {
font-family:“omnes-pro";
The style attributes are specified only at the end of each code, like this:
When I add the fonts to Bubble, I can only add in these two forms so that it works: Omnes Pro and omnes-pro. So I’m unable to get different font weights and styles.
We are facing the same problem as @codeless - the adobe .css file has the same font-family name for every weight. According to @andrew4 how do you override the font-family name in the CSS?
If I understand your question correctly, you need to override the font family name in the .css file. For example, font-family:“omnes-pro-regular”;
Also, as far as I can work out, the custom font in Bubble’s settings must have exactly the same name as the font-family (i.e. omnes-pro-regular) in the CSS.
I don’t think it makes any difference what you call the font, but it must be the same in the .CSS file and for the custom font name in Bubble.
@andrew4 and @user.system I am almost 6 months too late to this thread, but did this get resolved? I have opened the typekit link for my own web fonts to manually copy each link into Bubble. However, I do not know how to override the font family. Is it just a case of changing the css in a text edit format?
Apologies for the questions, I have very little coding knowledge. I have shifted from Webflow to Bubble
@tristan2 I have coding knowledge and I don’t know why this isn’t working, ha… I’m just getting to grips with bubble. Seems super powerful but something as simple as adding an adobe font shouldn’t be so time consuming.
So I’ve created my own css file linking to the adobe font files, and the font family name in the css file matches exactly the name i’m giving to bubble, but still no bueno.
Hey, I thought it was tricky initially but after speaking to support it kind of makes sense. Open the typekit link provided for your web fonts project. Then you should have individual groups of code to each typeface provided in the CSS. I didn’t have coding software or knowledge but Support told me to download Atom to change the code. So I copied the individual groups of code for each typeface into Atom. From there you have to change the font family name if you intend on using different variants of the same family (eg the whole Aktiv Grotesk family is just aktiv grotesk in the typekit code but each one has to be changed. So if you’re uploading Aktiv Grotesk Light and regular, you need to change the font family name in the code from aktiv-grotesk to aktiv-grotesk-light and so on. Take this code, paste it into a file uploader on bubble, then take the aws link it gives you and use that as your css file path. Make sure that what ever you called the font family in the css when you changed it, is the same as the font name when you upload it. So if you changed it to aktiv-grotesk-light for example, make sure the font name is also the same: aktiv-grotesk-light.
Sorry for the rambling, I had to learn the hard way and ended up asking support to literally spell it out for me. Hopefully this helps.
Hey tristan,
Just came across this as I encountered issues with abode font
Still doesn’t work for me
I repeated your steps but it seems that it’s not calling the font-family ;
Not really sure what is going on since i did it for other typos, and it worked…
