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':

src/styles/app.scss

@@ -1,18 +1,5 @@
 @charset "utf-8";
-@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=Forum&family=Cutive+Mono");
-
-/**
-  font-family: 'Courgette', cursive;
-  font-family: 'IBM Plex Serif', serif;
-  font-family: 'Kiwi Maru', serif;
-  font-family: 'Maven Pro', sans-serif;
-  font-family: 'Noto Sans KR', sans-serif;
-  font-family: 'Tajawal', sans-serif;
-  font-family: 'Domine', serif;
-  font-family: 'Amiri', serif;
-  font-family: 'Courier Prime', serif;
-  font-family: 'Cutive Mono', monospace;
-*/
+@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");
 
 $primary: #2c3a47;
 $link: #445fb9;