Prefer the style fonts

4 files changed, 25 insertions, 5 deletions

diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index c1c3a1ca..847b231a 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -5,6 +5,7 @@ import { map } from './core/MapView';
 import { getStatusColor } from '../common/util/formatter';
 import usePersistedState from '../common/util/usePersistedState';
 import { mapIconKey } from './core/preloadImages';
+import { findFonts } from './core/mapUtil';
 
 const MapPositions = ({ positions, onClick, showStatus }) => {
   const id = 'positions';
@@ -73,7 +74,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
         'text-allow-overlap': true,
         'text-anchor': 'bottom',
         'text-offset': [0, -2],
-        'text-font': ['Roboto Regular'],
+        'text-font': findFonts(map),
         'text-size': 12,
       },
       paint: {
@@ -89,7 +90,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       layout: {
         'icon-image': 'background',
         'text-field': '{point_count_abbreviated}',
-        'text-font': ['Roboto Regular'],
+        'text-font': findFonts(map),
         'text-size': 14,
       },
     });
diff --git a/modern/src/map/core/mapUtil.js b/modern/src/map/core/mapUtil.js
index 087c499b..1f8d5d8a 100644
--- a/modern/src/map/core/mapUtil.js
+++ b/modern/src/map/core/mapUtil.js
@@ -89,3 +89,21 @@ export const geofenceToFeature = (theme, item) => {
 };
 
 export const geometryToArea = (geometry) => stringify(reverseCoordinates(geometry));
+
+export const findFonts = (map) => {
+  const fontSet = new Set();
+  const { layers } = map.getStyle();
+  layers?.forEach?.((layer) => {
+    layer.layout?.['text-font']?.forEach?.(fontSet.add, fontSet);
+  });
+  const availableFonts = [...fontSet];
+  const regularFont = availableFonts.find((it) => it.includes('Regular'));
+  if (regularFont) {
+    return [regularFont];
+  }
+  const anyFont = availableFonts.find(Boolean);
+  if (anyFont) {
+    return [anyFont];
+  }
+  return ['Roboto Regular'];
+};
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index 12eedf7d..3dafa639 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
-import { geofenceToFeature } from '../core/mapUtil';
+import { findFonts, geofenceToFeature } from '../core/mapUtil';
 
 const MapGeofence = () => {
   const id = 'geofences';
@@ -49,7 +49,7 @@ const MapGeofence = () => {
       type: 'symbol',
       layout: {
         'text-field': '{name}',
-        'text-font': ['Roboto Regular'],
+        'text-font': findFonts(map),
         'text-size': 12,
       },
       paint: {
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index e3364ec2..6215b45e 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -5,6 +5,7 @@ import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
 import { usePreference } from '../../common/util/preferences';
+import { findFonts } from '../core/mapUtil';
 
 const PoiMap = () => {
   const id = 'poi';
@@ -55,7 +56,7 @@ const PoiMap = () => {
           'text-field': '{name}',
           'text-anchor': 'bottom',
           'text-offset': [0, -0.5],
-          'text-font': ['Roboto Regular'],
+          'text-font': findFonts(map),
           'text-size': 12,
         },
         paint: {