fix(hooks): useFont hook loading state lifecycle is now accurate

packages/core/useFont/index.ts

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-
-import { useMount } from '../useMount'
+import { useEffect, useState } from 'react'
 
 /**
  * React FontFace, a hook to load fonts asynchronously
@@ -16,23 +14,22 @@ export function useFont(
   source: string | Blob,
   descriptors?: FontFaceDescriptors
 ) {
-  const [loaded, setLoaded] = useState(false)
+  const [loaded, setLoaded] = useState(true)
   const [error, setError] = useState(false)
   const [font, setFont] = useState<FontFace | null>(null)
 
-  useMount(() => {
+  useEffect(() => {
     const font = new FontFace(family, `url(${source})`, descriptors)
 
     setFont(font)
+    setLoaded(false)
 
     font
       .load()
-      .then(() => {
-        document.fonts.add(font)
-        setLoaded(true)
-      })
+      .then(() => document.fonts.add(font))
       .catch(() => setError(true))
-  })
+      .finally(() => setLoaded(true))
+  }, [descriptors, family, source])
 
   return { loaded, error, font }
 }