download font integration

src/modules/repo/interfaces/UserSettings.ts

@@ -2,14 +2,7 @@ import { DataType } from '@/data/DataType.enum'
 import { Model } from '@/data/models/Model'
 
 export interface UserSettings extends Model<DataType.UserSettings> {
-  fontFamily?:
-    | 'Courgette'
-    | 'IBM Plex Serif'
-    | 'Kiwi Maru'
-    | 'Maven Pro'
-    | 'Noto Sans KR'
-    | 'Tajawal'
-    | 'Domine'
+  fontFamily?: string
   mode?: 'light' | 'dark'
   backlink?: boolean
 }

src/modules/user/hooks/useUserSettings.hook.ts

@@ -1,8 +1,9 @@
 import { watchEffect } from 'vue'
 
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { downloadGoogleFont } from '@/utils/downloadGoogleFont'
 
-const DEFAULT_FONT_POLICY = "'Courier Prime', monospace"
+const DEFAULT_FONT_POLICY = 'Courier Prime, monospace'
 
 const LIGHT_FONT_COLOR = '#4a4a4a'
 const LIGHT_BACKGROUND = '#ffffff'
@@ -22,7 +23,7 @@ export const useUserSettings = () => {
     const mode = store.userSettings?.mode
     const root = document.documentElement
 
-    root.style.setProperty('--font-family', fontFamily ?? DEFAULT_FONT_POLICY)
+    downloadGoogleFont(fontFamily || DEFAULT_FONT_POLICY)
 
     switch (mode) {
       case 'dark':