🐛 Fix custom fonts loading on dashboard thumbnails

CHANGES.md

@@ -40,6 +40,9 @@
 - Support for import/export binary format [Taiga #2991](https://tree.taiga.io/project/penpot/us/2991)
 
 ### :bug: Bugs fixed
+
+- Fix font rendering on grid thumbnails [Taiga #3473](https://tree.taiga.io/project/penpot/issue/3473)
+
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)
 

frontend/src/app/main/fonts.cljs

@@ -23,7 +23,7 @@
    [okulary.core :as l]
    [promesa.core :as p]))
 
-(log/set-level! :warn)
+(log/set-level! :info)
 
 (def google-fonts
   (preload-gfonts "fonts/gfonts.2022.07.11.json"))
@@ -126,8 +126,7 @@
 
 (defmethod load-font :builtin
   [{:keys [id ::on-loaded] :as font}]
-  (log/debug :action "load-font" :font-id id :backend "builtin")
+  (log/debug :hint "load-font" :font-id id :backend "builtin")
-  ;; (js/console.log "[debug:fonts]: loading builtin font" id)
   (when (fn? on-loaded)
     (on-loaded id)))
 
@@ -142,7 +141,7 @@
 (defmethod load-font :google
   [{:keys [id ::on-loaded] :as font}]
   (when (exists? js/window)
-    (log/debug :action "load-font" :font-id id :backend "google")
+    (log/info :hint "load-font" :font-id id :backend "google")
     (let [url (generate-gfonts-url font)]
       (load-font-css! url (partial on-loaded id))
       nil)))
@@ -185,7 +184,7 @@
 (defmethod load-font :custom
   [{:keys [id ::on-loaded] :as font}]
   (when (exists? js/window)
-    (js/console.log "[debug:fonts]: loading custom font" id)
+    (log/info :hint "load-font" :font-id id :backend "custom")
     (let [css (generate-custom-font-css font)]
       (add-font-css! css)
       (when (fn? on-loaded)
@@ -200,36 +199,43 @@
    (p/create (fn [resolve]
                (ensure-loaded! id resolve))))
   ([id on-loaded]
-   (when-let [font (get @fontsdb id)]
+   (log/debug :action "try-ensure-loaded!" :font-id id)
-     (log/debug :action "ensure-loaded!" :font-id id :font font)
+   (if-not (exists? js/window)
-     (cond
+     ;; If we are in the worker environment, we just mark it as loaded
-       ;; Font already loaded, we just continue
+     ;; without really loading it.
-       (contains? @loaded id)
+     (do
-       (p/do
+       (swap! loaded conj id)
-         (on-loaded id)
+       (p/resolved id))
-         id)
 
-       ;; Font is currently downloading. We attach the caller to the promise
+     (when-let [font (get @fontsdb id)]
-       (contains? @loading id)
+       (cond
-       (-> (get @loading id)
+         ;; Font already loaded, we just continue
-           (p/then #(do (on-loaded id) id)))
+         (contains? @loaded id)
+         (p/do
+           (on-loaded id)
+           id)
 
-       ;; First caller, we create the promise and then wait
+         ;; Font is currently downloading. We attach the caller to the promise
-       :else
+         (contains? @loading id)
-       (let [on-load (fn [resolve]
+         (-> (get @loading id)
-                       (swap! loaded conj id)
+             (p/then #(do (on-loaded id) id)))
-                       (swap! loading dissoc id)
-                       (on-loaded id)
-                       (resolve id))
 
-             load-p (p/create
+         ;; First caller, we create the promise and then wait
-                     (fn [resolve _]
+         :else
-                       (-> font
+         (let [on-load (fn [resolve]
-                           (assoc ::on-loaded (partial on-load resolve))
+                         (swap! loaded conj id)
-                           (load-font))))]
+                         (swap! loading dissoc id)
+                         (on-loaded id)
+                         (resolve id))
 
-         (swap! loading assoc id load-p)
+               load-p (p/create
-         load-p)))))
+                       (fn [resolve _]
+                         (-> font
+                             (assoc ::on-loaded (partial on-load resolve))
+                             (load-font))))]
+
+           (swap! loading assoc id load-p)
+           load-p))))))
 
 (defn ready
   [cb]