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

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 }