ثبت کردن فونت

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام من فونت‌های ک گفته شده رو دانلود کردم اما زمانی ک میخوام وارد سند کنم نمیشه توضیح میدید

سلام. وقتتون بخیر
ببینید باید فرمت‌های WOFF - WOFF2 رو دانلود کرده باشید. (فرمت TTF هم یک فرمت قدیمی‌تر که در ویندوز و مک استفاده می‌شه، اگه قصد دارید IE 8 و نسخه‌های قدیمی‌تر رو پشتیبانی کنید هم EOT لازمه).

بعد از دانلود فونت در فرمت‌های WOFF و WOFF2 (و در صورت نیاز TTF و EOT)، می‌تونید از @font-face استفاده کنید:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/my-font.woff2') format('woff2'),
         url('fonts/my-font.woff') format('woff'),
         url('fonts/my-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'MyCustomFont', sans-serif;
}

اگر اعمال نمی‌شه؛
1. مطمئن شید مسیردهیتون درست هست و فایل فونت دقیقاً توی همون مسیری که تو CSS نوشتید، قرار داره.

2. اسم فونت رو چک کنید: بررسی کنید که اسم فایل فونت دقیقاً همونی باشه که توی CSS گذاشتید. مثلاً اگه فونتتون MyFont.woff2 هست ولی تو CSS نوشتی my-font.woff2، اعمال نمی‌شه چون سیستم به حروف حساسه (خصوصاً در سرورهای لینوکسی).

3. بررسی کنید که فونت توی صفحه اعمال شده یا نه
تو DevTools مرورگر (F12 بزنید یا Ctrl + Shift + I) به Elements برید و المنتی که باید فونت داشته باشه رو بررسی کنید. توی تب Computed، مقدار font-family رو ببینید.
اگه فونت مورد نظرت نبود، یعنی مشکل وجود داره.
4. !important رو امتحان کنید: بعضی وقتا یه استایل دیگه فونت رو اورراید می‌کنه. برای اطمینان، اینو تست کنید:

body {
    font-family: 'MyFont', sans-serif !important;
}

5. گاهی مرورگر نمی‌تونه فونت رو بارگذاری کنه و توی Console ارور می‌ده. بعضی ارورها:

"Failed to load resource: net::ERR_FILE_NOT_FOUND" ⬅ یعنی مسیر فونت اشتباهه.
"Access to font has been blocked by CORS policy" ⬅ یعنی مشکل امنیتی هست (این توی سرورها پیش میاد).
6. اگه همه چیز درسته ولی فونت هنوز اعمال نمی‌شه، کش مرورگر رو پاک کنید:

Ctrl + Shift + R (ریلود سخت)
یا از DevTools (F12) → تب Application → روی "Clear Storage" کلیک کنید
7. از گوگل فونت هم می‌تونید استفاده کنید؛ می‌رید به آدرس https://fonts.google.com/ فونت مورد نظرتون رو انتخاب می‌کنید، روی دکمه "Select this style" کلیک کنید و کدی که توی بخش Embed نشون داده شده رو کپی کنید و داخل <head> در index.html بذارید. مثال:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

بعدش توی CSS ازش استفاده کنید (همون font-family که خودش بهتون داده رو کپی کنید و به body بدید مثلا):

body {
    font-family: 'Roboto', sans-serif;
}

سحر پاشائی ۱۵ بهمن ۱۴۰۳، ۰۸:۰۷