New Atlassian fonts in Forge apps with Custom UI

GaborDicsoMidori · July 10, 2025, 8:36am

Hi All,

Is there a way to use the new Atlassian Sans and Atlassian Mono fonts (Typography - Product typefaces and scale - Foundations - Atlassian Design System) in Forge apps using Custom UI? I tried the latest @atlaskit/tokens package but I am unable to make the design tokens referencing the new fonts work. Am I missing something, or are the new fonts not available to Forge apps yet?

Thanks,
Gabor

MichaelChan · July 17, 2025, 3:17pm

Yes, I am encountering the same problem. If I point to the Atlassian font woff2 file in my css file, I would need extra permissions which breaks the Runs on Atlassian Badge.

If Atlassian wants Forge App to have a consistent style with Atlassian products, the fonts and other UI elements should be made easily accessible

MarkusDarko · October 8, 2025, 11:20pm

Experiencing the same issue. Agreed - it is kind of ridiculous that including Atlassian’s own fonts and stylesheets makes the forge app “not eligible for the Runs on Atlassian program.”

remie · October 9, 2025, 6:06am

This issue comes from the fact that both the Forge and Connect theming APIs have not been updated to support all themes. They currently only add the DARK and LIGHT themes to the data-theme attribute on the HTML tag.

If you look at the source of the host application, there are more entries that should be added to that attribute:

data-theme="dark:dark light:light spacing:spacing typography:typography"

In order to get the correct fonts loaded (without having to reference them from external source), you will need to update the data-theme attribute manually upon loading of your app. We created a utility library that helps us setting the right value for the data-theme attribute. It is open source so you can check out how we solved this:

github.com/collabsoft-net/iapetus

packages/theme/src/ensureTheme.ts

develop

import { setGlobalTheme } from '@atlaskit/tokens';

import { ensureDataTheme } from './ensureDataTheme';
import { isThemeAvailable } from './isThemeAvailable';
import { loadFallbackStyles } from './loadFallbackStyles';
import { Themes } from './themes';

export const ensureThemes = (themes: Themes|Array<Themes>): boolean => {
  try {
    const items = Array.isArray(themes) ? themes : [ themes ];

    for (const theme of items) {
      // Check if the theme is already available from CDN
      if (!isThemeAvailable(theme)) {
        // If not, load them from the official design system package
        setGlobalTheme({
          dark: theme === Themes.DARK ? 'dark' : undefined,
          light: theme === Themes.LIGHT ? 'light' : undefined,
          spacing: theme === Themes.SPACING ? 'spacing' : undefined,
          typography: theme === Themes.TYPOGRAPHY

This file has been truncated. show original

For convenience, we created a React hook and a HOC which we use in our applications.

I hope this helps!

Cheers,

Remie