Custom Fonts and Other CSS In ArcGIS Enterprise Experience Builder
Custom fonts are coming to ArcGIS Online at the end of this year. For Enterprise users, that means waiting for Spring or Summer 2026 to get this feature. Don't want to wait that long? Here's a Demo Widget for getting custom fonts, or any other CSS, into Enterprise 11.X today.
How does it work? Well, any React component can carry it's own CSS, but CSS is not strictly confined to the component. So, just write some CSS in a Custom Widget that targets the whole page, or a specific component, and your CSS overwrites the default CSS. Just drop in a CSS Widget into some unused spot in your application, like an unopenable Sidebar, or add some CSS to a Custom Widget you are already using.
Using this Demo Widget, I was able to successfully import three fonts from the Google Fonts Library, two by cdn and one self-hosted, and it looks...
Dreadful. Absolutely awful.
These fonts, Ballet, Henny Penny and Audiowide, were selected for distinctiveness, not because I think they should ever actually be used for anything, ever, under any circumstances. This is a Demo Widget. Don't let me catch you actually using it without at least replacing the fonts.
If you look in the upper left corner, you can see some Impact, one of the built-in fonts in Experience Builder. (Because the ability to make memes is a critical business need, I guess. Who chose these default fonts and why? Very little variety and the only one that isn't basic serif or sans-serif is Impact. The default default, Avenir Next, is the only one of the built-in fonts I can wholeheartedly recommend using. I am very fond of Avenir Next.) So it is possible to still use the built-in fonts and overwrite the custom CSS, although once you change a Text Widget to a different font there is no way back to your custom CSS in that Text Widget. (You will need to start over with a new Text Widget.)
Getting a font from a cdn involves using an @import statement and a @font-face statement like this.
/*Imports a font from a cdn and creates a font face*/
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@font-face {
font-family: 'Henny Penny';
src: 'https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap';
}
Making a self-hosted font requires saving the font in the runtime/assets folder and using some JavaScript to register the font-face. Like this...
//For creating a font face from a self-hosted font
const ballet = new FontFace('Ballet', `url(${props.context.folderUrl}dist/runtime/assets/fonts/Ballet-Regular-VariableFont_opsz.ttf)`)
ballet.load().then(function (loadedFont) {
document.fonts.add(loadedFont)
}).catch(function (error) {
console.error('Font loading error:', error)
})
So yeah, get creative and bring in custom font and CSS into your ArcGIS Enterprise.
