Redraw map canvases after Monda loads

web/src/components/map/MapView.tsx

@@ -13,6 +13,7 @@ import { download } from '../../helpers/download'
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[], mode?: "temperature" | "faktiska", productionTemplate?: boolean }> = ({ type, data, mode = "temperature", productionTemplate = false }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     const [getImg, setImg] = createSignal(new Image());
+    const [fontReady, setFontReady] = createSignal(false);
     const weatherIconsSignal = createSignal<{[key: string]: string;}>({});
     const [getWeatherIcons] = weatherIconsSignal;
     const [getTitle, setTitle] = createSignal("");
@@ -42,6 +43,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
     }
 
     onMount(() => {
+        void document.fonts.load(`700 ${props.fontSize}px Monda`).then(() => setFontReady(true));
         const ctx = getCanvas()!.getContext("2d")!;
         const img = new Image();
         img.onload = () => {
@@ -60,6 +62,7 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
     });
 
     createEffect(() => {
+        fontReady();
         const ctx = getCanvas()!.getContext("2d")!;
         const weatherIcons = getWeatherIcons();
         const coordsAndData: CityData[] = data()