Change font for Popup Fields

722
5
04-12-2021 06:08 AM
Vakhtang_Zubiashvili
Occasional Contributor II

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

0 Kudos
5 Replies
Noah-Sager
Esri Regular Contributor

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:

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.

 

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor II

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 :(

0 Kudos
UndralBatsukh
Esri Regular Contributor

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
Occasional Contributor II

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';
  srcurl('./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:

2.jpg

2.jpg

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor II

No one can help me :(

0 Kudos