Fix font loading for safari

app/labs/static/labs/js/load-fonts.js

@@ -0,0 +1,20 @@
+// Load material icons and display when page has loaded
+if ('fonts' in document) {
+  document.fonts.ready.then(() => {
+    $('.material-icons').css({
+      'opacity': 1,
+      'max-width': 'unset',
+      'overflow': 'visible'
+    });
+  }).catch((error) => {
+    console.error('Font loading failed:', error);
+  });
+} else {
+  // Fallback for browsers that don't support document.fonts
+  console.warn('Font API not supported in this browser.');
+  $('.material-icons').css({
+    'opacity': 1,
+    'max-width': 'unset',
+    'overflow': 'visible'
+  });
+}

app/labs/templates/labs/header.html

@@ -30,17 +30,8 @@
     {% block script %}
     {% endblock %}
 
+    <script src="{% static 'labs/js/load-fonts.js' %}"></script>
     <script type="text/javascript">
-
-      // Load material icons and display when page has loaded
-      document.fonts.onloadingdone = () => {
-        $('.material-icons').css({
-          'opacity': 1,
-          'max-width': 'unset',
-          'overflow': 'visible'
-        });
-      }
-
       $(document).ready( () => {
         // Enable bootstrap tooltips
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))