From 4237aa6e02d7a1c58d2e4771e0d98621d14a2fe5 Mon Sep 17 00:00:00 2001
From: Nees Jan van Eck <36573334+neesjanvaneck@users.noreply.github.com>
Date: Sat, 16 Mar 2024 19:52:41 +0100
Subject: [PATCH] Fix legend font initialization

---
 src/components/ui/ClusterColorLegend/index.js | 12 ++++++++++--
 src/components/ui/ScoreColorLegend/index.js   |  2 +-
 src/components/ui/SizeLegend/index.js         |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/ClusterColorLegend/index.js b/src/components/ui/ClusterColorLegend/index.js
index a5ddfe6..76850bb 100644
--- a/src/components/ui/ClusterColorLegend/index.js
+++ b/src/components/ui/ClusterColorLegend/index.js
@@ -16,11 +16,19 @@ const ClusterColorLegend = observer(({ showTopClustersOnly, canvasWidth, legendW
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
   const [mouseCoord, setMouseCoord] = useState([]);
 
   useEffect(() => {
-    setFont(customFont || 'Roboto');
+    if (document.fonts) {
+      document.fonts.ready.then(() => {
+        setFont(customFont || 'Roboto');
+      });
+    } else {
+      setTimeout(() => {
+        setFont(customFont || 'Roboto');
+      }, 250);
+    }
     setCtx(canvasEl.current.getContext('2d'));
     visualizationStore.setGetClusterLegendCanvasImage(() => canvasEl.current);
     select(canvasEl.current)
diff --git a/src/components/ui/ScoreColorLegend/index.js b/src/components/ui/ScoreColorLegend/index.js
index 36849d7..af871b5 100644
--- a/src/components/ui/ScoreColorLegend/index.js
+++ b/src/components/ui/ScoreColorLegend/index.js
@@ -13,7 +13,7 @@ const ScoreColorLegend = observer(({
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
 
   useEffect(() => {
     if (document.fonts) {
diff --git a/src/components/ui/SizeLegend/index.js b/src/components/ui/SizeLegend/index.js
index ba42699..7d830ec 100644
--- a/src/components/ui/SizeLegend/index.js
+++ b/src/components/ui/SizeLegend/index.js
@@ -15,7 +15,7 @@ const SizeLegend = observer(({ canvasWidth, canvasHeight, customFont }) => {
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
   const [ticks, setTicks] = useState([]);
 
   useEffect(() => {