Custom font not displaying in Experience Builder developer version

[PaulCharsley]

We have created a custom theme extension in Experience Builder Developer edition v1.9. We want to add the custom font  "Segoe UI". Following the documentation we have:

Added the font in variables.json:

"typography": {

        "fontFamilyBase": "Segoe UI"    

    },

    "body": {

        "bg": "#c5c5c5",

        "color": "#ffffff",

        "fontFamily": "Segoe UI"

    },

Added the font ttf files into the assets/fonts folder in our theme extension.

However, when I look at the drop down list to select a font in Experience Builder, the Segoe UI font is not listed as an option. Has anyone successfully used a custom font in Experience Builder?

Thanks,

Paul

[JeffreyThompson2]

I was also struggling with custom fonts. The instructions on the developer site are currently wrong. See instructions from Esri Support below.

To use local fonts, In style.scss we have to use @font-face instead of @import and mention the following properties:

@font-face {
    font-family: 'Dancing Script';
    src: url('./assets/fonts/DS.ttf') format('truetype');
}

Also, ttf is working woff and woff2 is not working with Builder. We also, have to update the "variable.json" with the FamilyBase.

[DavidWilton]

It's a year later so maybe this was fixed. The way I got this to work with a local woff was by including a reference to the css in my style.ts and using absolute paths in my font.scss file. I tried using relative paths but it just didn't work. The global style body isn't necessary (you should do this through variables.jons I think) I just put it there to ensure that code was working

[DavidWilton]

Actually, this didn't work once I'd deployed the app. I ended up doing it in the style.ts like this

const globalStyles = () => {
  return css`
  body {
    font-family: 'Gotham', sans-serif;
    --pop-blue-light: #00AECB;
    --pop-yellow: #FFC726;
    --pop-orange: #F07B05;
    --pop-magenta: #E50E56;
    --pop-purple: #645FAA;
    --pop-green: #008850;
    --pop-blue-light: #00AECB;
    --pop-blue-mid: #277BB4;
  }
  @font-face {
    font-family: "Gotham";
    src: url("${urlUtils.getFixedRootPath()}themes/my-light/assets/fonts/GothamHTF-Book.woff2") format("woff2"),
      url("${urlUtils.getFixedRootPath()}themes/my-light/assets/fonts/GothamHTF-Book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Gotham";
    src: url("${urlUtils.getFixedRootPath()}themes/my-light/assets/fonts/GothamHTF-Bold.woff2") format("woff2"),
      url("${urlUtils.getFixedRootPath()}themes/my-light/assets/fonts/GothamHTF-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
  }
  
`
}

// global styles
export { globalStyles as Global }