nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

Vakhtang_Zubiashvili

No one can help me 😞

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:

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 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"> xyz</i>'
};

but no success.

What to do I do not know 😞

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.