diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 01a34ed50..08ac49561 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3031,9 +3031,9 @@
       }
     },
     "node_modules/axios-mock-adapter": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.1.tgz",
-      "integrity": "sha512-Pdm7nZuhkz/DSucQ4Bbo9qVBqfm9j7ev9ycTvIXHqvAjnJEjWPHKYfTfpounVp8MwjFFSHXGS7hCkTwAswtSTA==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.2.tgz",
+      "integrity": "sha512-jzyNxU3JzB2XVhplZboUcF0YDs7xuExzoRSHXPHr+UQajaGmcTqvkkUADgkVI2WkGlpZ1zZlMVdcTMU0ejV8zQ==",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "is-buffer": "^2.0.5"
@@ -3454,9 +3454,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==",
+      "version": "1.0.30001375",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz",
+      "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
       "funding": [
         {
           "type": "opencollective",
@@ -4621,9 +4621,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.212",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.212.tgz",
-      "integrity": "sha512-LjQUg1SpLj2GfyaPDVBUHdhmlDU1vDB4f0mJWSGkISoXQrn5/lH3ECPCuo2Bkvf6Y30wO+b69te+rZK/llZmjg=="
+      "version": "1.4.213",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.213.tgz",
+      "integrity": "sha512-+3DbGHGOCHTVB/Ms63bGqbyC1b8y7Fk86+7ltssB8NQrZtSCvZG6eooSl9U2Q0yw++fL2DpHKOdTU0NVEkFObg=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -11049,9 +11049,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.54.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
-      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "version": "1.54.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -15469,9 +15469,9 @@
       }
     },
     "axios-mock-adapter": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.1.tgz",
-      "integrity": "sha512-Pdm7nZuhkz/DSucQ4Bbo9qVBqfm9j7ev9ycTvIXHqvAjnJEjWPHKYfTfpounVp8MwjFFSHXGS7hCkTwAswtSTA==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.2.tgz",
+      "integrity": "sha512-jzyNxU3JzB2XVhplZboUcF0YDs7xuExzoRSHXPHr+UQajaGmcTqvkkUADgkVI2WkGlpZ1zZlMVdcTMU0ejV8zQ==",
       "requires": {
         "fast-deep-equal": "^3.1.3",
         "is-buffer": "^2.0.5"
@@ -15793,9 +15793,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw=="
+      "version": "1.0.30001375",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz",
+      "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw=="
     },
     "chai": {
       "version": "4.3.6",
@@ -16627,9 +16627,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.212",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.212.tgz",
-      "integrity": "sha512-LjQUg1SpLj2GfyaPDVBUHdhmlDU1vDB4f0mJWSGkISoXQrn5/lH3ECPCuo2Bkvf6Y30wO+b69te+rZK/llZmjg=="
+      "version": "1.4.213",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.213.tgz",
+      "integrity": "sha512-+3DbGHGOCHTVB/Ms63bGqbyC1b8y7Fk86+7ltssB8NQrZtSCvZG6eooSl9U2Q0yw++fL2DpHKOdTU0NVEkFObg=="
     },
     "emoji-regex": {
       "version": "8.0.0",
@@ -21132,9 +21132,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.54.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.3.tgz",
-      "integrity": "sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==",
+      "version": "1.54.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.4.tgz",
+      "integrity": "sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
diff --git a/frontend/src/pages/places.vue b/frontend/src/pages/places.vue
index 482d9f7eb..c843b563a 100644
--- a/frontend/src/pages/places.vue
+++ b/frontend/src/pages/places.vue
@@ -46,7 +46,7 @@ export default {
       attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
       maxCount: 500000,
       options: {},
-      mapFont: [],
+      mapFont: ["Open Sans Regular"],
       result: {},
       filter: {q: this.query()},
       lastFilter: {},
@@ -80,7 +80,8 @@ export default {
         let mapKey = "";
 
         if (this.$config.has("mapKey")) {
-          mapKey = this.$config.get("mapKey");
+          // Remove non-alphanumeric characters from key.
+          mapKey = this.$config.get("mapKey").replace(/[^a-z0-9]/gi, '');
         }
 
         const settings = this.$config.settings();
@@ -93,18 +94,16 @@ export default {
           filter.quality = "3";
         }
 
-        let mapFont = ['Roboto', 'sans-serif'];
-
         let mapOptions = {
           container: "map",
           style: "https://api.maptiler.com/maps/" + s.style + "/style.json?key=" + mapKey,
+          glyphs: "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=" + mapKey,
           attributionControl: true,
           customAttribution: this.attribution,
           zoom: 0,
         };
 
         if (!mapKey || s.style === "offline") {
-          mapFont = ["Open Sans Semibold"];
           mapOptions = {
             container: "map",
             style: {
@@ -194,12 +193,13 @@ export default {
             customAttribution: this.attribution,
             zoom: 0,
           };
+          this.url = '';
+        } else {
+          this.url = 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=' + mapKey;
         }
 
         this.filter = filter;
-        this.url = 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=' + mapKey;
         this.options = mapOptions;
-        this.mapFont = mapFont;
       });
     },
     query: function () {