Arabic Headers in jsPDF AutoTable Appear as Garbled or Corrupt Text

I am using jsPDF with jspdf-autotable to generate a Right-to-Left (RTL) PDF report in Arabic. Everything works perfectly, but the headers appear as garbled/corrupt text instead of proper Arabic characters.

const handlePDFExportArabic = () => {
  const doc = new jsPDF({ orientation: "landscape" });

  // ✅ Add Arabic Font
  doc.addFileToVFS("Amiri-Regular.ttf", arabicFont);
  doc.addFont("Amiri-Regular.ttf", "Amiri", "normal");
  doc.setFont("Amiri");

  // ✅ Set Right-to-Left (RTL)
  doc.setLanguage("ar");

  // ✅ Title in Arabic (Centered)
  doc.text("📄 قائمة عملاء الائتمان", 287, 16, {
    align: "right",
    lang: "ar",
  });

  // ✅ Create AutoTable with Arabic Headers
  autoTable(doc, {
    startY: 20,
    head: [
      [
        "رقم الطلب",  
        "رقم الحساب",
        "اسم العميل",
        "الفرع", 
        "الحد الائتماني", 
        "رقم السجل التجاري",
        "حالة السجل التجاري", 
        "الحالة", 
      ],
    ],
    body: rowData.map((row) => [
      row.RequestId || "غير متوفر",
      row.AccountNumber || "غير متوفر",
      row.customerInfo?.[0]?.commercialNameArabic || "غير متوفر",
      row.branchIdArabic || "غير متوفر",
      row.customerInfo?.[0]?.capital
        ? row.customerInfo[0].capital
            .toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " ريال"
        : "غير متوفر",
      row.customerInfo?.[0]?.crNumber || "غير متوفر",
      new Date(row.customerInfo?.[0]?.crEndDateGregorian) > new Date()
        ? "✔️ ساري"
        : "❌ منتهي",
      row.Status.includes("Waiting")
        ? "⏳ قيد المراجعة"
        : row.Status.includes("Approved")
        ? "✅ مقبول"
        : row.Status.includes("Rejected")
        ? "❌ مرفوض"
        : "غير متوفر",
    ]),
    theme: "grid",
    margin: { top: 30 },
    styles: {
      font: "Amiri",
      fontSize: 10,
      useUnicode: true,
      halign: "right",
    },
    headStyles: { fontStyle: "bold", font: "Amiri", halign: "right", useUnicode: true },

    columnStyles: {
      0: { cellWidth: "wrap" }, 
      1: { cellWidth: "wrap" },
      2: { cellWidth: "wrap" }, 
      3: { cellWidth: 20 },
      4: { cellWidth: "wrap" },
      5: { cellWidth: "wrap" },
      6: { cellWidth: 40 },
      7: { cellWidth: "wrap" },
    },
  });

  // ✅ Save PDF with Arabic Name
  doc.save("قائمة_العملاء_الائتمانيين.pdf");
};

Problem ❌ Headers appear in garbled/unreadable text

I have already: Added useUnicode: true Applied font: "Amiri" Used doc.setLanguage("ar") Set halign: "right"

How can I fix the Arabic headers in jsPDF autotable

I found that i needed to mention the font style that i have added previously on this

doc.addFileToVFS("Amiri-Regular.ttf", arabicFont);
doc.addFont("Amiri-Regular.ttf", "Amiri", "normal");
doc.setFont("Amiri");

so my headstyles should look like this

headStyles: { font: "Amiri", fontStyle: "normal" }