localIdeographFontFamily: false to load CJK fonts (#893)

close #892 

this changes works well for CJK fonts.

<img width="736" alt="Screenshot 2024-03-25 at 22 04 36"
src="https://github.com/maplibre/maputnik/assets/20744195/adb0295e-5428-4773-b216-8f380e2dcb05">

package-lock.json

@@ -36,7 +36,7 @@
         "lodash.get": "^4.4.2",
         "lodash.isequal": "^4.5.0",
         "lodash.throttle": "^4.1.1",
-        "maplibre-gl": "^4.1.1",
+        "maplibre-gl": "^4.1.2",
         "maputnik-design": "github:maputnik/design#172b06c",
         "ol": "^6.14.1",
         "ol-mapbox-style": "^7.1.1",
@@ -7109,9 +7109,9 @@
       "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
     },
     "node_modules/maplibre-gl": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.1.tgz",
-      "integrity": "sha512-DmHru9FTHCOngNHzIx9W2+MlUziYPfPxd2qjyeWwczBYNx2SDpmH394MkuCvSgnfUm5Zvs4NaYCqMu44jUga1Q==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.2.tgz",
+      "integrity": "sha512-98T+3BesL4w/N39q/rgs9q6HzHLG6pgbS9UaTqg6fMISfzy2WGKokjK205ENFDDmEljj54/LTfdXgqg2XfYU4A==",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",

package.json

@@ -47,7 +47,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^4.1.1",
+    "maplibre-gl": "^4.1.2",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",

src/components/MapMaplibreGl.tsx

@@ -133,8 +133,11 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
       container: this.container!,
       style: this.props.mapStyle,
       hash: true,
-      maxZoom: 24
-    }
+      maxZoom: 24,
+      // setting to always load glyphs of CJK fonts from server
+      // https://maplibre.org/maplibre-gl-js/docs/examples/local-ideographs/
+      localIdeographFontFamily: false
+    } satisfies MapOptions;
 
     const map = new MapLibreGl.Map(mapOpts);