nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

Anonymous User

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-resources · GitHub

Hope this helps.

Best,

Yiwei

All comments

Anonymous User

Hi,

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.