How to change global/default font family

766
2
Jump to solution
07-28-2020 02:28 AM
AndreasEugster
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
YiweiMa
Esri Contributor

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

View solution in original post

2 Replies
YiweiMa
Esri Contributor

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
New Contributor III

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

0 Kudos