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/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>