Configuration de la police

Le package fournit la police Merriweather (poids 300, 400, 700, 900) directement depuis Google Fonts. Aucune installation manuelle ni import next/font/google n'est nécessaire.

Fichier à modifier n°1 — layout.tsx

Importer le CSS du package avantvotre CSS local. L'ordre est important.

// app/layout.tsx
import "@ramses1er/cbk-toolkit/styles.css";  // ← 1er : police + Tailwind du package
import "./globals.css";                        // ← 2nd : votre CSS

Règle : Toujours importer @ramses1er/cbk-toolkit/styles.cssen premier. C'est ce fichier qui charge Merriweather et définit les variables Tailwind.

Fichier à modifier n°2 — globals.css

Supprimer ou commenter tout ce qui concerne Tailwind et les polices. Le package s'en charge.

/* app/globals.css — à commenter ou supprimer */

// ❌ Import Tailwind (le package fournit le sien)
/* @import "tailwindcss"; */

// ❌ Thème Tailwind (le package définit ses propres valeurs)
/* @theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
} */

// ❌ Police sur body (Merriweather est déjà appliquée)
/* body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
} */

Attention : Si vous laissez @import "tailwindcss"ou un body { font-family }, ils écraseront la configuration du package et Merriweather ne s'affichera pas.

Fichier à modifier n°3 — next.config.ts (Next.js uniquement)

Supprimer transpilePackages s'il contient @ramses1er/cbk-toolkit. Le package est pré-compilé, cette option est inutile.

// next.config.ts — avant
const nextConfig = {
  transpilePackages: ["@ramses1er/cbk-toolkit"],  // ← supprimer cette ligne
};

// next.config.ts — après
const nextConfig = {
  // plus besoin de transpilePackages
};

Cas particulier — Vite

Si vous utilisez PostCSS + Tailwind dans un projet Vite, supprimez la configuration Tailwind ou désactivez l'import Tailwind dans votre CSS pour éviter les conflits.

// src/main.tsx — ordre correct
import "@ramses1er/cbk-toolkit/styles.css";  // 1er
import "./index.css";                          // 2nd

Vérification

Après ces modifications, ouvrez votre navigateur et vérifiez :

Que la police affichée dans l'onglet "Computed" est bien "Merriweather"
Qu'il n'y a pas d'erreur 404 dans la console réseau pour les fichiers Google Fonts
Que le rendu des composants du package est correct (bordures, couleurs, espacements)