✨ (theme) Custom font option (#1268)

Closes #1249

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced components for customizing fonts, including Google and
custom font options.
- Enhanced theme customization by simplifying theme objects and adding
new font customization options.
- Implemented dynamic font injection for web pages based on
user-selected font configurations.

- **Bug Fixes**
- Fixed a condition in theme template card rendering to correctly check
avatar enablement.
- Corrected font property handling across various components to support
both string and object types.

- **Refactor**
	- Updated option properties in RadioButtons component to be readonly.
- Simplified logic for setting CSS variables for fonts, including checks
for font types and existence.

- **Documentation**
- Added constants and schemas for supporting new font types in theme
customization.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/embeds/js/src/utils/injectFont.ts

@@ -0,0 +1,32 @@
+import { isEmpty } from '@typebot.io/lib'
+import { Font } from '@typebot.io/schemas'
+import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
+
+const googleFontCdnBaseUrl = 'https://fonts.bunny.net/css2'
+
+export const injectFont = (font: Font) => {
+  const existingFont = document.getElementById('bot-font')
+
+  if (typeof font === 'string' || font.type === 'Google') {
+    const fontFamily =
+      (typeof font === 'string' ? font : font.family) ??
+      defaultTheme.general.font.family
+    if (existingFont?.getAttribute('href')?.includes(fontFamily)) return
+    const fontElement = document.createElement('link')
+    fontElement.href = `${googleFontCdnBaseUrl}?family=${fontFamily}:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap`
+    fontElement.rel = 'stylesheet'
+    fontElement.id = 'bot-font'
+    document.head.appendChild(fontElement)
+    return
+  }
+
+  if (font.type === 'Custom') {
+    if (existingFont?.getAttribute('href') === font.url || isEmpty(font.url))
+      return
+    const fontElement = document.createElement('link')
+    fontElement.href = font.url
+    fontElement.rel = 'stylesheet'
+    fontElement.id = 'bot-font'
+    document.head.appendChild(fontElement)
+  }
+}

packages/embeds/js/src/utils/setCssVariablesValue.ts

@@ -68,7 +68,9 @@ const setGeneralTheme = (
   )
   documentStyle.setProperty(
     cssVariableNames.general.fontFamily,
-    generalTheme.font ?? defaultTheme.general.font
+    (typeof generalTheme.font === 'string'
+      ? generalTheme.font
+      : generalTheme.font?.family) ?? defaultTheme.general.font.family
   )
 }