Custom Font not showing in font list (custom theme)

[MarcoPoetsch]

Hi,

I want to have a custom fonts (e.g. Open Sans) in my theme.
While it seems to work in the preview...:

...my custom font is not showing in my fonts list and can't therefore not be used in my widgets

I was following these instructions here:
https://developers.arcgis.com/experience-builder/guide/theme-development/ resp. this video here https://mediaspace.esri.com/media/t/1_4fbh1eud

[JeffreyThompson2]

Even properly configured custom fonts will not be shown in the dropdown list in the Builder mode. There will be a blank line in the menu like in your screenshot. Did you try typing in the text box to see if the font is correct?

Additionally, the documentation on the website is incorrect. Try replacing  your import statement with a font-face declaration. Like this:

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

Also .ttf and .otf fonts work, but I could not make .woff or .woff2 fonts work.

[MarcoPoetsch]

Thanks Jeffrey,

I saw your post somehere else in this forum 🙂
However, it's still not working. I even tried to use you Dancing Script font 🙂

[JeffreyThompson2]

Are you trying to call in the font from an API or do you have it downloaded?

If it is downloaded, make sure your file structure looks like this. Experience Builder is very opinionated about file structures and folder names.

[MarcoPoetsch]

Very odd,...
The fonts are under ...\client\your-extensions\themes\demo-theme\assets\fonts

in my style.scss I have:

---

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

 
fyi, style.ts is not used...

[JeffreyThompson2]

You have sytle.scss. Try renaming your file to style.scss.

[MarcoPoetsch]

haha, yeah. true.
changed it, but still not showing in the drop-down menue.

[MarcoPoetsch]

in the mean time I got a workaround.
I added the fonts to those files here:

I know that's not ideal, but at least I can select them now in the list...

[EthanWissler]

Hey I am also trying to add custom fonts; this issue seems really pervasive. How did you solve it? Thanks!

[arc_ticodex]

Hi @MarcoPoetsch!

I'm also having issues with custom themes and fonts.

Could you provide some detail on how you managed to apply this workaround?

Thanks!!!