Community

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

901
2
03-09-2023 10:36 AM
BenjaminMeader
by
New Contributor
‎03-09-2023 10:36 AM

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.

BenjaminMeader_0-1678386597142.png

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

BenjaminMeader_1-1678386642151.png  

BenjaminMeader_2-1678386695814.png

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!

0 Kudos
2 Replies
SaiNeerukonda
by
New Contributor
‎06-21-2023 01:42 PM

Hi Benjamin, 

Any luck figuring out a workaround solution for this?

Thank you...

0 Kudos
LauraWaddle_-_FS
by
New Contributor II
‎12-18-2023 11:20 AM

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!

0 Kudos