سایت خود را بسازید ، به روش saalek110

[saalek110]

صفحه ۳۹ :
افزودن فونت


از آنجایی که فونت‌های پیش فرض مرورگرها چندان جذاب نیستند، باید به سراغ اضافه کردن فونت به وب‌سایت خود برویم......

آموزش اضافه کردن کردن فونت دلخواه به صفحات سایت - ادمین سایت

اگر از فونت سایت خود خسته شده‌اید در این آموزش همراه ما باشید تا روش اضافه کردن فونت به وب‌سایت را بررسی کنیم. | آموزش‌ رایگان HTML -CSS

adminesite.com

اگر شما یک وب‌فونت دانلود کنید مشاهده می‌کنید که با چند فرمت مختلف از جمله TTF، WOFF، OTF و… مواجه هستید. فونت‌های وب دارای چندین فرمت مختلف هستند که هرکدام در مرورگر خاصی پشتیبانی می‌شوند.

برای مثال فونت با فرمت EOT فقط در مرورگر اکسپلورر پشتیبانی می‌شود در حالی که فرمت TTF در اکثر مرورگر‌های معروف قابل استفاده است.



سالک: گویا ttf و woff همه را پشتیبانی می کند و woff2 هم بدک نیست.

در سایت بالا ، فونت وزیر را برای دانلود گذاشته.

Release v33.003 · rastikerdar/vazirmatn

Fixed wrong kerning for ژ ر with مـ تـ ثـ ۱ تیر ۱۴۰۱ اصلاح کرنینگ اشتباه ژ ر با مـ تـ ثـ

github.com

سالک: لینک بالا داخل فایل readme اون فونت وزیر بود که از سایت بالا دانلود کردم.
کد زیر هم داخل فایل readme بود:

@font-face {
  font-family: Vazir;
  src: url('Vazir.eot');
  src: url('Vazir.eot?#iefix') format('embedded-opentype'),
       url('Vazir.woff') format('woff'),
       url('Vazir.ttf') format('truetype');
  font-weight: normal;
}
      
@font-face {
  font-family: Vazir;
  src: url('Vazir-Bold.eot');
  src: url('Vazir-Bold.eot?#iefix') format('embedded-opentype'),
       url('Vazir-Bold.woff') format('woff'),
       url('Vazir-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: Vazir;
  src: url('Vazir-Light.eot');
  src: url('Vazir-Light.eot?#iefix') format('embedded-opentype'),
       url('Vazir-Light.woff') format('woff'),
       url('Vazir-Light.ttf') format('truetype');
  font-weight: 300;
}