Select to view content in your preferred language

Custom Font not showing in font list (custom theme)

1106
9
08-14-2023 11:11 PM
MarcoPoetsch
Occasional Contributor II

Hi,

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

MarcoPoetsch_1-1692079748303.png

 

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

MarcoPoetsch_0-1692079636461.png

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

 

0 Kudos
9 Replies
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
MarcoPoetsch
Occasional Contributor II

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 🙂

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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.

JeffreyThompson2_0-1692193399433.png

 

GIS Developer
City of Arlington, Texas
0 Kudos
MarcoPoetsch
Occasional Contributor II

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

MarcoPoetsch_0-1692221404897.png

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...

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
MarcoPoetsch
Occasional Contributor II

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

0 Kudos
MarcoPoetsch
Occasional Contributor II

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

MarcoPoetsch_1-1692223033117.png

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

EthanWissler
New Contributor

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

0 Kudos
arc_ticodex
New Contributor III

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!!!

0 Kudos