Merge pull request #663 from enstie/font-addition

Add more built-in annotation font options

src/components/video-editor/AnnotationSettingsPanel.tsx

@@ -50,7 +50,11 @@ interface AnnotationSettingsPanelProps {
 	onDelete: () => void;
 }
 
-const FONT_FAMILIES = [
+const FONT_FAMILIES: Array<
+	| { value: string; labelKey: string; name?: never }
+	| { value: string; labelKey?: never; name: string }
+> = [
+	{ value: "Inter", name: "Inter" },
 	{ value: "system-ui, -apple-system, sans-serif", labelKey: "classic" },
 	{ value: "Georgia, serif", labelKey: "editor" },
 	{ value: "Impact, Arial Black, sans-serif", labelKey: "strong" },
@@ -59,6 +63,21 @@ const FONT_FAMILIES = [
 	{ value: "Arial, sans-serif", labelKey: "simple" },
 	{ value: "Verdana, sans-serif", labelKey: "modern" },
 	{ value: "Trebuchet MS, sans-serif", labelKey: "clean" },
+	{ value: '"Plus Jakarta Sans", sans-serif', name: "Plus Jakarta Sans" },
+	{ value: '"Space Grotesk", sans-serif', name: "Space Grotesk" },
+	{ value: '"DM Sans", sans-serif', name: "DM Sans" },
+	{ value: "Sora, sans-serif", name: "Sora" },
+	{ value: "Manrope, sans-serif", name: "Manrope" },
+	{ value: '"IBM Plex Sans", sans-serif', name: "IBM Plex Sans" },
+	{ value: '"Playfair Display", Georgia, serif', name: "Playfair Display" },
+	{ value: "Merriweather, Georgia, serif", name: "Merriweather" },
+	{ value: "Lora, Georgia, serif", name: "Lora" },
+	{ value: '"IBM Plex Mono", monospace', name: "IBM Plex Mono" },
+	{ value: '"Fira Code", monospace', name: "Fira Code" },
+	{ value: '"Bebas Neue", sans-serif', name: "Bebas Neue" },
+	{ value: "Oswald, sans-serif", name: "Oswald" },
+	{ value: "Caveat, cursive", name: "Caveat" },
+	{ value: '"Permanent Marker", cursive', name: "Permanent Marker" },
 ];
 
 const FONT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 128];
@@ -85,6 +104,8 @@ export function AnnotationSettingsPanel({
 		modern: t("fontStyles.modern"),
 		clean: t("fontStyles.clean"),
 	};
+	const getFontLabel = (font: (typeof FONT_FAMILIES)[number]) =>
+		font.labelKey ? fontStyleLabels[font.labelKey] : font.name;
 
 	// Load custom fonts on mount
 	useEffect(() => {
@@ -231,7 +252,7 @@ export function AnnotationSettingsPanel({
 													value={font.value}
 													style={{ fontFamily: font.value }}
 												>
-													{fontStyleLabels[font.labelKey]}
+													{getFontLabel(font)}
 												</SelectItem>
 											))}
 											{customFonts.length > 0 && (

src/i18n/locales/it/settings.json

@@ -1,5 +1,6 @@
 {
 	"zoom": {
+		"previewHold": "Tieni premuto per vedere l'anteprima dell'effetto zoom",
 		"level": "Livello zoom",
 		"customScale": "Zoom personalizzato",
 		"selectRegion": "Seleziona una regione zoom da regolare",

src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@400;700&family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Code:wght@400;700&family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@400;700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@400;700&family=Permanent+Marker&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@400;700&family=Sora:wght@400;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;