Change font for Popup Fields

[Vakhtang_Zubiashvili]

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

[Noah-Sager]

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...

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.

[Vakhtang_Zubiashvili]

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 😞

[UndralBatsukh]

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>'
        };

[Vakhtang_Zubiashvili]

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:

[Vakhtang_Zubiashvili]

No one can help me 😞