Add font load event to allow the header to redraw as the fonts load

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -104,6 +104,10 @@
   }
 
   onMount(async () => {
+    document.fonts.onloadingdone = e => {
+      builderStore.loadFonts(e.fontfaces)
+    }
+
     if (!hasSynced && application) {
       try {
         await API.syncApp(application)
@@ -144,6 +148,8 @@
           />
         </span>
         <Tabs {selected} size="M">
+          {#key $builderStore?.fonts}
+            <span style="display:contents">
               {#each $layout.children as { path, title }}
                 <TourWrap stepKeys={[`builder-${title}-section`]}>
                   <Tab
@@ -155,6 +161,8 @@
                   />
                 </TourWrap>
               {/each}
+            </span>
+          {/key}
         </Tabs>
       </div>
       <div class="topcenternav">

packages/builder/src/stores/builder/builder.js

@@ -14,6 +14,7 @@ export const INITIAL_BUILDER_STATE = {
   tourKey: null,
   tourStepKey: null,
   hoveredComponentId: null,
+  fonts: null,
 }
 
 export class BuilderStore extends BudiStore {
@@ -36,6 +37,16 @@ export class BuilderStore extends BudiStore {
     this.websocket
   }
 
+  loadFonts(fontFaces) {
+    const ff = fontFaces.map(
+      fontFace => `${fontFace.family}-${fontFace.weight}`
+    )
+    this.update(state => ({
+      ...state,
+      fonts: [...(state.fonts || []), ...ff],
+    }))
+  }
+
   init(app) {
     if (!app?.appId) {
       console.error("BuilderStore: No appId supplied for websocket")