91 lines
2.5 KiB
Markdown
91 lines
2.5 KiB
Markdown
# راهنمای اضافه کردن فونت سفارشی
|
|
|
|
## مراحل اضافه کردن فونت:
|
|
|
|
### 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` را ویرایش کنید:
|
|
|
|
```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` هم به‌روز کنید:
|
|
|
|
```js
|
|
fontFamily: {
|
|
sans: ['نام-فونت-شما', 'Tahoma', 'Arial', 'system-ui', 'sans-serif']
|
|
}
|
|
```
|
|
|
|
## مثال برای فونت‌های دیگر:
|
|
|
|
اگر فونت دیگری دارید (مثلاً Vazir):
|
|
|
|
1. فایل‌ها را در `public/fonts/` قرار دهید:
|
|
- `Vazir-Regular.woff2`
|
|
- `Vazir-Bold.woff2`
|
|
|
|
2. در `globals.css` اضافه کنید:
|
|
```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`:
|
|
```js
|
|
fontFamily: {
|
|
sans: ['Vazir', 'Tahoma', 'Arial', 'system-ui', 'sans-serif']
|
|
}
|
|
```
|
|
|
|
## تست فونت:
|
|
بعد از اضافه کردن فونت، صفحه را refresh کنید و در Developer Tools (F12) بررسی کنید که فونت به درستی لود شده است.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|