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

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

یکی از مشکل های وبمسترهای تازه کار و طراحان نوپا موضوع استفاده از فونت ها است؛

تا کی می توانیم از فونت 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 برای نمایش فونت ها در صفحات وب دارید روی این لینک کلیک کنید.

موفق و پیروز باشید.