pwa/public/fonts/FONT_SETUP.md

راهنمای اضافه کردن فونت سفارشی

مراحل اضافه کردن فونت:

1. قرار دادن فایل‌های فونت

فایل‌های فونت خود را در پوشه public/fonts/ قرار دهید.

2. نام‌گذاری فایل‌ها

فایل‌های فونت را با این نام‌ها ذخیره کنید:

• IRANSans-Regular.woff2 - برای وزن معمولی (font-weight: normal)
• IRANSans-Bold.woff2 - برای وزن Bold (font-weight: bold)
• IRANSans-Medium.woff2 - برای وزن Medium (font-weight: 500)
• IRANSans-Light.woff2 - برای وزن Light (font-weight: 300)

نکته: اگر نام فایل‌های شما متفاوت است، باید در src/styles/globals.css مسیرها را تغییر دهید.

3. فرمت‌های پشتیبانی شده

• .woff2 (پیشنهادی - بهترین کیفیت)
• .woff
• .ttf
• .otf

4. تنظیمات در globals.css

اگر نام فونت یا مسیر فایل‌ها متفاوت است، فایل src/styles/globals.css را ویرایش کنید:

@font-face {
  font-family: 'نام-فونت-شما';
  src: url('/fonts/نام-فایل-فونت.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

5. تنظیمات در tailwind.config.js

اگر نام فونت را تغییر دادید، در tailwind.config.js هم به‌روز کنید:

fontFamily: {
  sans: ['نام-فونت-شما', 'Tahoma', 'Arial', 'system-ui', 'sans-serif']
}

مثال برای فونت‌های دیگر:

اگر فونت دیگری دارید (مثلاً Vazir):

1. فایل‌ها را در public/fonts/ قرار دهید:

   • Vazir-Regular.woff2
   • Vazir-Bold.woff2

2. در globals.css اضافه کنید:

@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

3. در tailwind.config.js:

fontFamily: {
  sans: ['Vazir', 'Tahoma', 'Arial', 'system-ui', 'sans-serif']
}

تست فونت:

بعد از اضافه کردن فونت، صفحه را refresh کنید و در Developer Tools (F12) بررسی کنید که فونت به درستی لود شده است.