Add font support to correctly display text in generated images for social media

Integrate DejaVu Sans font by updating Dockerfile, registering the font in imageProcessor.ts, and referencing it in canvas font styles to resolve text rendering issues on Facebook stories.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: ded0e79e-eb39-4fe2-9aad-3cb0b8722e22
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/EMt8Koz

Dockerfile

@@ -19,7 +19,9 @@ RUN apk add --no-cache \
     giflib \
     pixman \
     vips-dev \
-    pkgconfig
+    pkgconfig \
+    ttf-dejavu \
+    fontconfig
 
 # Copier les fichiers de configuration
 COPY package*.json ./

server/services/imageProcessor.ts

@@ -21,6 +21,15 @@ const CROP_FORMATS = {
   instagramStory: { width: 1080, height: 1920 } as CropDimensions,
 };
 
+// Register DejaVu Sans font for proper character rendering
+try {
+  const fontPath = path.join(process.cwd(), "server", "fonts", "DejaVuSans.ttf");
+  registerFont(fontPath, { family: 'DejaVu Sans' });
+  console.log('✓ Font DejaVu Sans enregistrée avec succès');
+} catch (error) {
+  console.error('Erreur lors de l\'enregistrement de la police:', error);
+}
+
 export class ImageProcessor {
   private uploadsDir: string;
 
@@ -150,7 +159,7 @@ export class ImageProcessor {
     let totalTextHeight = 0;
 
     while (fontSize >= MIN_FONT_SIZE) {
-      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      ctx.font = `bold ${fontSize}px "DejaVu Sans", Arial, sans-serif`;
       
       lines = this.wrapText(ctx, text, maxTextWidth);
       const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
@@ -165,7 +174,7 @@ export class ImageProcessor {
 
     if (fontSize < MIN_FONT_SIZE) {
       fontSize = MIN_FONT_SIZE;
-      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      ctx.font = `bold ${fontSize}px "DejaVu Sans", Arial, sans-serif`;
       lines = this.wrapText(ctx, text, maxTextWidth);
       const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
       totalTextHeight = lines.length * lineHeight;