Add font support for improved text rendering in social media posts

Install TrueType font support and download DejaVu Sans font in Dockerfile for improved text rendering in social media posts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ead2a9f3-9995-48a5-ae34-160e8520129e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/EMt8Koz

Dockerfile

@@ -21,7 +21,9 @@ RUN apk add --no-cache \
     vips-dev \
     pkgconfig \
     ttf-dejavu \
-    fontconfig
+    fontconfig \
+    curl \
+    tar
 
 # Copier les fichiers de configuration
 COPY package*.json ./
@@ -32,6 +34,14 @@ RUN npm install --legacy-peer-deps
 # Copier tout le code source
 COPY . .
 
+# Télécharger et installer la police DejaVu Sans pour le rendu de texte
+RUN mkdir -p server/fonts && \
+    cd server/fonts && \
+    curl -L -o dejavu.tar.bz2 "https://sourceforge.net/projects/dejavu/files/dejavu/2.37/dejavu-fonts-ttf-2.37.tar.bz2/download" && \
+    tar -xjf dejavu.tar.bz2 && \
+    cp dejavu-fonts-ttf-2.37/ttf/DejaVuSans.ttf . && \
+    rm -rf dejavu.tar.bz2 dejavu-fonts-ttf-2.37
+
 # Augmenter la mémoire pour le build (résout les problèmes de mémoire avec Vite)
 ENV NODE_OPTIONS="--max-old-space-size=4096"
 

replit.md

@@ -11,7 +11,7 @@ Preferred communication style: Simple, everyday language.
 ## Recent Changes
 
 ### November 18, 2025
-- **Facebook Story Text Rendering Fix**: Fixed critical issue where text on Facebook Stories appeared as unreadable white squares (missing glyphs). Root cause: node-canvas didn't have access to proper fonts for rendering French characters and special characters. Solution: (1) Added TrueType font support packages to Dockerfile (`ttf-dejavu`, `fontconfig`), (2) Bundled DejaVu Sans font file (740KB) in `server/fonts/DejaVuSans.ttf`, (3) Registered font at module load using `registerFont()` from node-canvas with error handling, (4) Updated text rendering to explicitly use "DejaVu Sans" as primary font family with Arial/sans-serif fallbacks. This ensures all characters (French accents, emoji, special characters) display correctly on both Facebook and Instagram stories. The font is included in Docker builds and works in both development and production environments. Files modified: `Dockerfile`, `server/services/imageProcessor.ts`, added `server/fonts/DejaVuSans.ttf`.
+- **Facebook Story Text Rendering Fix**: Fixed critical issue where text on Facebook Stories appeared as unreadable white squares (missing glyphs). Root cause: node-canvas didn't have access to proper fonts for rendering French characters and special characters. Solution: (1) Added TrueType font support packages to Dockerfile (`ttf-dejavu`, `fontconfig`, `curl`, `tar`), (2) Dockerfile automatically downloads and installs DejaVu Sans font (740KB) during Docker build process from SourceForge, ensuring the font is always available in production, (3) Registered font at module load using `registerFont()` from node-canvas with error handling, (4) Updated text rendering to explicitly use "DejaVu Sans" as primary font family with Arial/sans-serif fallbacks. This ensures all characters (French accents, emoji, special characters) display correctly on both Facebook and Instagram stories. The font is automatically installed in Docker builds and works in both development and production environments. Files modified: `Dockerfile`, `server/services/imageProcessor.ts`.
 
 ### November 17, 2025
 - **Access Token Expiration Tracking**: Added automatic tracking and visual display of Facebook/Instagram access token expiration dates in the "Pages gérées" section. Implementation: (1) Added `tokenExpiresAt` timestamp column to `social_pages` table in database schema, (2) POST endpoint automatically calculates expiration date as current date + 90 days when adding a new page, (3) PUT endpoint recalculates expiration date (current date + 90 days) when updating the access token, (4) UI displays expiration status with color-coded visual indicators in page cards: green (>15 days), orange (7-15 days), red (<7 days or expired), with warning icon for urgent/expired tokens, (5) Shows remaining days and formatted expiration date using date-fns with French locale. This helps users proactively identify and renew expiring tokens before they cause publishing failures. Files modified: `shared/schema.ts`, `server/routes.ts`, `client/src/pages/pages.tsx`.