Fix font loading (#114)

Author: halamix2

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## WIP
+
+- fixed text handling (text centering, legth calculations, font loading)
+
 ## 0.4.0
 
 - logos and tracker updated for GSPS Dzieciom 2025

index.html

@@ -6,19 +6,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-    <link
-      href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap"
-      rel="stylesheet"
-    />
-
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp|Material+Symbols+Outlined|Material+Symbols+Round|Material+Symbols+Sharp"

src/fontLoader.ts

@@ -0,0 +1,64 @@
+const fontURLs = {
+  BarlowCondensed:
+    'url(https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;600&display=swap)',
+  SairaCondensed:
+    'url(https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&display=swap)',
+  PTSansNarrow: 'url(https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap)'
+}
+
+const fontBarlowCondensedLight = new FontFace('Barlow Condensed', fontURLs.BarlowCondensed, {
+  style: 'normal',
+  weight: '300'
+})
+
+const fontBarlowCondensedMedium = new FontFace('Barlow Condensed', fontURLs.BarlowCondensed, {
+  style: 'normal',
+  weight: '500'
+})
+
+const fontBarlowCondensedSemibold = new FontFace('Barlow Condensed', fontURLs.BarlowCondensed, {
+  style: 'normal',
+  weight: '600'
+})
+
+const fontSairaCondensedSemibold = new FontFace('Saira Condensed', fontURLs.SairaCondensed, {
+  style: 'normal',
+  weight: '600'
+})
+
+const fontSairaCondensedBold = new FontFace('Saira Condensed', fontURLs.SairaCondensed, {
+  style: 'normal',
+  weight: '700'
+})
+
+const fontSairaCondensedExtrabold = new FontFace('Saira Condensed', fontURLs.SairaCondensed, {
+  style: 'normal',
+  weight: '800'
+})
+
+const fontPTSansNarrowBold = new FontFace('Saira Condensed', fontURLs.SairaCondensed, {
+  style: 'normal',
+  weight: '700'
+})
+
+export const fonts = {
+  install() {
+    Promise.all([
+      fontBarlowCondensedLight.load(),
+      fontBarlowCondensedMedium.load(),
+      fontBarlowCondensedSemibold.load(),
+      fontSairaCondensedSemibold.load(),
+      fontSairaCondensedBold.load(),
+      fontSairaCondensedExtrabold.load(),
+      fontPTSansNarrowBold.load()
+    ]).then(() => {
+      document.fonts.add(fontBarlowCondensedLight)
+      document.fonts.add(fontBarlowCondensedMedium)
+      document.fonts.add(fontBarlowCondensedSemibold)
+      document.fonts.add(fontSairaCondensedSemibold)
+      document.fonts.add(fontSairaCondensedBold)
+      document.fonts.add(fontSairaCondensedExtrabold)
+      document.fonts.add(fontPTSansNarrowBold)
+    })
+  }
+}

src/main.ts

@@ -5,6 +5,7 @@ import { createPinia } from 'pinia'
 import 'vuetify/styles'
 
 import { defaultVuetify } from '@/vuetifyInstance'
+import { fonts } from '@/fontLoader'
 
 import App from './App.vue'
 import router from './router'
@@ -15,5 +16,6 @@ const vuetify = defaultVuetify(),
 app.use(createPinia())
 app.use(router)
 app.use(vuetify)
+app.use(fonts)
 
 app.mount('#app')

src/views/RunnerView.vue

@@ -239,7 +239,6 @@ watch(photo, async (newPhoto: string) => {
 
   redrawCanvas()
 })
-document.fonts.onloadingdone = redrawCanvas
 
 watch(mainCanvas, redrawCanvas)