How to get a custom font to show up as an option for text?

Question

Hello,

I'm working with Audubon to make some Web Experiences and trying to use the developer version of Experience Builder to add custom fonts, but I'm having trouble getting the fonts to show up.

I've got so far as to create a custom theme by cloning this demo-theme repository (https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/themes/demo-theme), and changing fontFamilyBase in variables.json to reflect the font I want (for testing purposes, I'm trying to use Petrona from Google Fonts). And I changed the style.ts file by uncommenting and linking to the Google Fonts url.

However, when I restart the client & server, I open the Experience Builder developer edition to find no option for Petrona within the custom theme.

Hovering over the blank space, the tooltip reads Petrona, which makes me think it recognizes the font that I want. But any text I type in a text element comes in as a basic placeholder sans-serif.

How do I get the font to show up as an option?

Thanks for any advice!

LauraWaddle_-_FS · Answer

In addition to what you did, I also added the custom font to client\dist\jimu-ui\index.js (I am running ExB Developer Edition version 1.12). So for your font, you would have a string in that index.js file similar to:

function(e){e.PETRONA="Petrona",e.AVENIRNEXT="Avenir Next",e.CALIBRI="Calibri",e.PMINGLIU="PmingLiu",e.IMPACT="Impact",e.GEORGIA="Georgia",e.ARIAL="Arial",e.TIMESNEWROMAN="Times New Roman",e.SIMHEI="SimHei",e.MICROSOFTYAHEI="Microsoft YaHei"}

Finally, I also added it to: \client\dist\jimu-ui\advanced\rich-text-editor.js

So you would have a string in that rich-text-editor.js file similar to:

const p=[d.FontFamilyValue.PETRONA,d.FontFamilyValue.AVENIRNEXT,d.FontFamilyValue.CALIBRI,d.FontFamilyValue.PMINGLIU,d.FontFamilyValue.IMPACT,d.FontFamilyValue.GEORGIA,d.FontFamilyValue.ARIAL,d.FontFamilyValue.TIMESNEWROMAN,d.FontFamilyValue.SIMHEI,d.FontFamilyValue.MICROSOFTYAHEI]

I believe that string shows up twice in rich-text-editor.js so make sure you update both.

Hopefully this does the trick!

SaiNeerukonda · Answer

Hi Benjamin,

Any luck figuring out a workaround solution for this?

Thank you...