Google Fonts (#525)

* Google Fonts

* Google fonts improvement

* font button color

* Refine font selection UI and update font fetching logic

- Update FontsController to fetch Google fonts sorted by popularity.
- Enhance FontCard component with additional skeleton loaders for better UX during font loading.
- Adjust check icon positioning in FontCard to be absolute for consistent UI.
- Remove unnecessary class in GoogleFontPicker's text input.
- Add border and rounded styling to the font list container in GoogleFontPicker.
- Simplify computed property for enrichedFonts in GoogleFontPicker.
- Implement inline font style preview in FormCustomization component.

---------

Co-authored-by: Frank <csskfaves@gmail.com>
Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenCompleteForm.vue

@@ -2,7 +2,14 @@
   <div
     v-if="form"
     class="open-complete-form"
+    :style="{ '--font-family': form.font_family }"
   >
+    <link
+      v-if="adminPreview && form.font_family"
+      rel="stylesheet"
+      :href="getFontUrl"
+    >
+    
     <h1
       v-if="!isHideTitle"
       class="mb-4 px-2"
@@ -249,6 +256,11 @@ export default {
     },
     isHideTitle () {
       return this.form.hide_title || (import.meta.client && window.location.href.includes('hide_title=true'))
+    },
+    getFontUrl() {
+      if(!this.form || !this.form.font_family) return null
+      const family = this.form?.font_family.replace(/ /g, '+')
+      return `https://fonts.googleapis.com/css?family=${family}:wght@400,500,700,800,900&display=swap`
     }
   },
 
@@ -330,6 +342,9 @@ export default {
 
 <style lang="scss">
 .open-complete-form {
+  * {
+    font-family: var(--font-family) !important;
+  }
   .form-description, .nf-text {
     ol {
       @apply list-decimal list-inside;

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -53,6 +53,24 @@
       label="Form Theme"
     />
 
+    <label class="text-gray-700 font-medium text-sm">Font Style</label>
+    <v-button
+      color="white"
+      class="w-full mb-4"
+      size="small"
+      @click="showGoogleFontPicker = true"
+    >
+      <span :style="{ 'font-family': (form.font_family?form.font_family+' !important':null) }">
+        {{ form.font_family || 'Default' }}
+      </span>
+    </v-button>
+    <GoogleFontPicker
+      :show="showGoogleFontPicker"
+      :font="form.font_family || null"
+      @close="showGoogleFontPicker=false"
+      @apply="onApplyFont"
+    />
+
     <div class="flex space-x-4 justify-stretch">
       <select-input
         name="size"
@@ -173,12 +191,14 @@
 <script setup>
 import { useWorkingFormStore } from "../../../../../stores/working_form"
 import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import GoogleFontPicker from "../../../editors/GoogleFontPicker.vue"
 import ProTag from "~/components/global/ProTag.vue"
 
 const workingFormStore = useWorkingFormStore()
 const form = storeToRefs(workingFormStore).content
 const isMounted = ref(false)
 const confetti = useConfetti()
+const showGoogleFontPicker = ref(false)
 
 onMounted(() => {
   isMounted.value = true
@@ -190,4 +210,9 @@ const onChangeConfettiOnSubmission = (val) => {
     confetti.play()
   }
 }
+
+const onApplyFont = (val) => {
+  form.value.font_family = val
+  showGoogleFontPicker.value = false
+}
 </script>