Forum Documentation Showcase Pricing Learn more

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:

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