Custom font not displaying in Experience Builder developer version

639
1
09-30-2022 07:14 PM
Labels (1)
PaulCharsley
New Contributor II

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
0 Kudos
1 Reply
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos