How to change global/default font family

[AndreasEugster]

Hi,

Recently I started playing around with the Experience Builder Developer Edition - super excited that v1.1 is already released! I have mainly focused on usability and widgets, so I'm not very familiar with the whole "layout/theme" part yet.

How do I change the standard/global font family for an experience within the developer environment?

Can I change it individually in the Experience-Application config file? Do I have to create/overwrite/copy-paste-modifiy a theme (how?) ...or what would be an approach?

Thanks in advance,

Andi

[Anonymous User · Accepted solution]

Hi,

You change to the global font family by creating a custom theme and modifying the font family variable `fontFamilyBase`. Please follow this sample to get started with the custom theme: https://developers.arcgis.com/experience-builder/sample-code/themes/demo-theme/ 

and if you would like to import your own font assets, you can do so by providing a link to the resource in the Global style module within the style.ts file in the theme. One example within the demo theme: arcgis-experience-builder-sdk-resources/style.ts at master · Esri/arcgis-experience-builder-sdk-reso... 

Hope this helps.

Best,

Yiwei

[AndreasEugster]

Hi Yiwei

Thank you for your explanations. This is exactly what I was looking for!

Although I just found out that with DevEdition 1.1, you can directly adapt the FontFamily for the default themes within the Experience! (Unlike before, only the colors)

A great addition for people who do not want to create or modify a whole theme just for font changes.

Andi

[aa_GIS]

I'm trying to do this and it's not working for me, do u mind telling me the steps to do it? 

Thank you.

Edit: I have figured out a solution if anyone is still facing this issue

1- put the font file in the custom theme-> assets folder.

2- create .SASS file and name it style, in it use @ font-face and import ur font from the assets folder. 

3- delete style.ts file from the custom theme folder