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/pages/forms/[slug]/index.vue

@@ -178,6 +178,39 @@ const pageMeta = computed(() => {
   }
   return {}
 })
+
+const getFontUrl = computed(() => {
+  if(!form.value || !form.value.font_family) return null
+  const family = form.value.font_family.replace(/ /g, '+')
+  return `https://fonts.googleapis.com/css?family=${family}:wght@400,500,700,800,900&display=swap`
+})
+
+const headLinks = computed(() => {
+  const links = []
+  if (form.value && form.value.font_family) {
+    links.push({
+        rel: 'stylesheet',
+        href: getFontUrl.value
+    })
+  }
+  if (pageMeta.value.page_favicon) {
+    links.push({
+        rel: 'icon', type: 'image/x-icon',
+        href: pageMeta.value.page_favicon
+    })
+    links.push({
+        rel: 'apple-touch-icon',
+        type: 'image/png',
+        href: pageMeta.value.page_favicon
+    })
+    links.push({
+      rel: 'shortcut icon',
+      href: pageMeta.value.page_favicon
+    })
+  }
+  return links
+})
+    
 useOpnSeoMeta({
   title: () => {
     if (pageMeta.value.page_title) {
@@ -209,21 +242,7 @@ useHead({
     }
     return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
   },
-  link: pageMeta.value.page_favicon ? [
-    {
-      rel: 'icon', type: 'image/x-icon',
-      href: pageMeta.value.page_favicon
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      href: pageMeta.value.page_favicon
-    },
-    {
-      rel: 'shortcut icon',
-      href: pageMeta.value.page_favicon
-    }
-  ] : {},
+  link: headLinks.value,
   meta: pageMeta.value.page_favicon ? [
     {
       name: 'apple-mobile-web-app-capable',