topic Re: Custom font not displaying in Experience Builder developer version in ArcGIS Experience Builder Questions

Custom font not displaying in Experience Builder developer version

PaulCharsley — Sat, 01 Oct 2022 02:14:54 GMT

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

Re: Custom font not displaying in Experience Builder developer version

JeffreyThompson2 — Mon, 24 Apr 2023 18:05:21 GMT

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.

Re: Custom font not displaying in Experience Builder developer version

DavidWilton — Wed, 15 May 2024 04:34:18 GMT

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

Re: Custom font not displaying in Experience Builder developer version

DavidWilton — Mon, 20 May 2024 03:18:25 GMT

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