From 8090f838be78db7f3cd46e415556601ce270c42e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 6 Apr 2024 14:11:01 +0200
Subject: [PATCH] download font integration

---
 src/modules/repo/interfaces/UserSettings.ts    |  9 +--------
 src/modules/user/hooks/useUserSettings.hook.ts |  5 +++--
 src/styles/app.scss                            | 15 +--------------
 3 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts
index 5b55319..f70d6b7 100644
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/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
 }
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index 946c050..414a0cb 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/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':
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 0f0f629..925457a 100644
--- a/src/styles/app.scss
+++ b/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;