topic Re: Change font for Popup Fields in ArcGIS JavaScript Maps SDK Questions

Change font for Popup Fields

Vakhtang_Zubiashvili — Mon, 12 Apr 2021 13:08:35 GMT

Hi Guys,

I am using API 4.18, I need to change Font in Popup, I need to use my local font. I could do it for API 4.13 using CSS, but now it stops working. How can I do this now?

Kind regards,

Vakhtang

Re: Change font for Popup Fields

Noah-Sager — Mon, 12 Apr 2021 16:45:02 GMT

Hi @Vakhtang_Zubiashvili, it's tough to say without seeing how you did it at 4.13, but my hunch is that the HTML sanitizer (which we introduced at 4.14) is the issue here:

The HTML sanitizer was added to all widgets to sanitize and escape strings according to the ArcGIS Online supported HTML specification. This can cause HTML set in PopupTemplate.content or in other widgets to be removed.

https://developers.arcgis.com/javascript/latest/4.14/#breaking-changes

If this is the case, the alternative solution would be to use custom functions. Here is a blog post that details the issue and the workaround:
https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/using-html-with-popups-in-the-arcgis-api-for-javascript/

If this doesn't work for you, can you share some more details? I'd like to see how you are trying to do it at 4.18 (which worked at 4.13). A sample app on someplace like Codepen would be great.

Re: Change font for Popup Fields

Vakhtang_Zubiashvili — Mon, 12 Apr 2021 20:30:25 GMT

Dear Noah,

Thank you for response, for 4.12 (or 4.14 I do not remember exactly) I used CSS code like this to change font style in Popup:

.esri-widget__table {

font-family: HKolkhetyMtav; /* ფონტის შეცვლა popup-ში */

};

and it worked.

Now as you told me I tried something like this:

welltemplate = {
title: "Well",
content: '<i style="font-family:Garamond;font-size:16px"> xxxxx</i>'
};

but no success.

What to do I do not know 😞

Re: Change font for Popup Fields

UndralBatsukh — Mon, 12 Apr 2021 21:02:59 GMT

You

Hi there,

You should set the style on html elements like div, p, span etc.

The following will work for example:

var template = { // autocasts as new PopupTemplate() title: "{NAME} in {COUNTY}", content: '<div style="font-family:Garamond;font-size:26px"><i>content</i></div>' };

Re: Change font for Popup Fields

Vakhtang_Zubiashvili — Mon, 19 Apr 2021 08:44:08 GMT

Dear @UndralBatsukh

Thank you for replay.

It works, but only for Font Size, Font Color etc. But not for Font Style. Font Style remains default Sans-Serif...

Code Template:

welltemplate = { title: "Well", content: "<div style='font-family:HKolkhetyMtav;font-size:26px;color:red'><li> Hello Guys</li></div>" };

I use local font for my native language ( It is Georgian), here is CSS for it:

@font-face {

font-family: 'HKolkhetyMtav';

src: url('./fonts/hkolkhetymtav.ttf') format('embedded-opentype'), /* Internet Explorer */

url('./fonts/hkolkhetymtav.ttf') format('woff2'), /* Super Modern Browsers */

url('./fonts/hkolkhetymtav.ttf') format('woff'), /* Pretty Modern Browsers */

url('./fonts/hkolkhetymtav.ttf') format('truetype'), /* Safari, Android, iOS */

url('./fonts/hkolkhetymtav.ttf') format('svg'); /* Legacy iOS */

};

If i change font style in browser for <li> it works fine ( I have changed default FONT into Georgian FONT ("Hello Guys" is translated as "ცელოო ჩუყს"), see pics please:

Re: Change font for Popup Fields

Vakhtang_Zubiashvili — Tue, 04 May 2021 08:49:02 GMT

No one can help me 😞