آموزش استفاده از فونت فارسی در وب

آموزش استفاده از فونت فارسی در وب

یکی از مشکل‌های وبمسترهای تازه کار و طراحان نوپا موضوع استفاده از فونت‌ها است؛ تا کی می‌توانیم از فونت tahoma استفاده کنیم‌؟ تا کی باید از فونت‌های غیر فارسی در صفحات خود استفاده کنیم‌؟

آموزش استفاده از فونت فارسی در وب

خب در این نوشته قصد داریم تا با بیانی ساده آموزش استفاده از فونت فارسی در وب را برای شما شرح دهیم؛ ضمنا پکیجی از فونت‌های فارسی معروف برای شما جمع‌آوری کرده‌ایم تا به راحتی بتوانید از آن‌ها استفاده کنید. خب قبل از شروع آموزش استفاده از فونت فارسی در وب و بررسی موارد دیگر باید بگم در ابتدا درباره‌ی فونت tahoma صحبت کردیم؛ آقای فونت tahoma شرمنده ولی وقتش رسیده دست از سره ما ایرانی ها، فارسی زبان‌ها و طرفداران زبان فارسی برداری که خودمون راهه خودمونو پیدا کنیم.

آموزش افزودن فونت فارسی به صفحات وب

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

دانلود پکیج فونت‌های فارسی مناسب وب

درباره‌ی پکیج بالا

دوستان عزیز بنا به علاقه‌ی شخصی روی هیچ کدام از فایل‌های قابل دانلود در این وبسایت نه رمز عبوری و نه کپی رایت خاصی قرار نمی‌دهیم تا به سادگی از آن‌ها استفاده کنید امیدواریم این کار ما بدون احترام نماند و در صورت کپی برداری به صورت ارادی از طرف شما نامبرده شویم. // همانند قبل

برای استفاده هر فونت در صفحات وب باید نمونه‌ی آن فونت را با فرمت‌های eof و ttf و woff را در اختیار بگیرید(در پکیج بالا این فایل ها به طور کامل در اختیار شما هستند). حالا در مرحله‌ی بعد باید سراغ کدهای css برویم.

کد css:

@font-face {
    font-family: 'font';
    src: url('font.eot');
    src: url('font.eot') format('embedded-opentype'),
         url('font.woff2') format('woff2'),
         url('font.woff') format('woff'),
         url('font.ttf') format('truetype'),
         url('font.svg#font') format('svg');
}

با اضافه کردن این خط به فایل css اصلی صفحات خود توانایی استفاده از فونت دلخواه را در صفحات وب را برای خود تعریف کردید. حالا برای اینکه از این فونت استفاده کنید می‌توانید در بخش مورد نظرتان خاصیت font-family را برابر فونت تعریف شده قرار دهید. به مثال زیر توجه کنید.

مثال:

@font-face {
    font-family: 'font';
    src: url('font.eot');
    src: url('font.eot') format('embedded-opentype'),
         url('font.woff2') format('woff2'),
         url('font.woff') format('woff'),
         url('font.ttf') format('truetype'),
         url('font.svg#font') format('svg');
}

// Using :
body
{
   font-family: 'font';
}
// OR
h1
{
   font-family: 'font';
}
// OR
.menu
{
   font-family: 'font';
}

خب این آموزش هم به پایان رسید امیدوارم از این آموزش به بعد آقای tahoma شما رو تنها بگذاره؛ کلا باید تمام ما ایرانیان و فارسی زبانان این را دنبال کنیم تا زبان مادری خود را بین اقوام مختلف گسترش دهیم.

اگر مشکل CORS policy برای نمایش فونت‌ها در صفحات وب دارید روی این لینک کلیک کنید.