Forum Academy Marketplace Showcase Pricing Features

Using Adobe Custom Font in Multiple Weights

Hi,

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 have read this post: Experience hosting typekit css?, but things have change a bit with Adobe since then.

Has anyone managed to do this successfully and would like to share how?

Thanks, Andrew

Bumping this, as I have the same problem.

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.

Would love any help!

Hi,

I’ve managed to get this working after some help from Bubble Support (thanks!).

Once you’ve set up your web project in Adobe Fonts, you will be able to access a css specific to whatever fonts you have chosen. This is of the form:

https://use.typekit.net/xxxxxx.css

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:

@font-face {
font-family:“omnes-pro-regular”;
src:url("https://use.typekit.net/af/ … ") format(“woff2”),url("https://use.typekit.net/af/ … ") format(“woff”),url("https://use.typekit.net/af/ … ") format(“opentype”);
font-display:auto;font-style:normal;font-weight:400;
}

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:

And this is what the font drop down menu looks like in Bubble’s Style Editor:

I’m happy to provide further details if necessary.

Good luck :slight_smile:

3 Likes

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:

font-display:auto;font-style:normal;font-weight:700;

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.

Would love any advice on this.

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?

Any help would be appreciated.

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

1 Like

@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.

Is there something I’m missing?

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.

Thanks dude, literally just cracked it as well by using the file uploader. I was trying to link to it from a separate server before.

Cheers,
Jake.

1 Like

Hey tristan,
Just came across this as I encountered issues with abode font
Still doesn’t work for me :confused:
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…

Here is what i did :

  1. Imported the https://use.typekit.net/xxxxxx.css and changed the font-family-name

  2. Uploaded the file and selected the aws link

  3. Copied the aws url into my fonts and verified their names have been modified

  4. Copied the url and paste it on my settings > custom fonts

Do you have any idea what might be going down?