Forum Academy Marketplace Showcase Pricing Features

Segoe UI custom font - it works but I need to specify font weight, is that possible?

Hi everyone,

We use Microsoft Fluent UI with React in all our custom web apps and it uses Segoe UI (Home - Fluent UI)

I uploaded all these fonts from Windows and have them working in Bubble. The problem though is the base font uses 400 as the weight and the bold is 700, but on the page I linked above, as well as our existing one, there’s different weights, like 600 used in some cases.

How would I specify to use 600 weight in Bubble? I’ve tried various combinations of either the 400 regular one making it bold, or using semi bold etc but they always still just show 400 for the weight and don’t match my existing sites.

Is that something specific to the font when it refers to weight, or is that a setting in Bubble?

Here’s an example from my current site which is good:

But here’s Bubble if I make it bold (shows 700 weight, and if not bold it’s 400. If I use Segoe UI Bold then it’s 700 weight, same with if I use Segoe UI Semibold it’s also 700 weight):

It’s not the end of the world, I’m just trying to recreate a web app we have in react with Fluent UI but in Bubble and can’t get the fonts to match exactly, they are always just slightly off where it almost looks like I’m using some free 3rd party version of the font vs the real thing).