نصب فونت ایران سنس iransans روی وبسایت

در این مطلب آموزشی، برای استفاده از وب فونت‌های  ایران سن سریف یکی از دو روش زیر پیشنهاد می شود:

روش اول: استفاده از فایل آماده fontiran.css

در ابتدا فولدر webfonts (موجود در بسته دانلودی) را در مقصد کپی کنید.
(برای سهولت کار پیشنهاد می کنیم این فولدرها را در سطح ریشه (root) و در کنار فایل اصلی وب سایت که معمولا index نامگذاری می شود قرار دهید.)
فایل  fontiran.css حاوی دستورات و تنظیمات برای لود شدن تمامی وزن های ایران سنس سریف است.
محتویات این فایل fontiran.css (موجود در فولدر css) مشابه دستورات زیر است:

/* این فایل وظیفه تعریف و بارگذاری فونت های «فونت ایران» را برعهده دارد */
/* پیشنهاد می شود از روش قبل استفاده کنید */
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: bold;
src: url('../fonts/IRANSans-Bold-web.eot');
src: url('../fonts/IRANSans-Bold-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/IRANSans-Bold-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
url('../fonts/IRANSans-Bold-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/IRANSans-Bold-web.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 500;
src: url('../fonts/IRANSans-Medium-web.eot');
src: url('../fonts/IRANSans-Medium-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/IRANSans-Medium-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
url('../fonts/IRANSans-Medium-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/IRANSans-Medium-web.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 300;
src: url('../fonts/IRANSans-Light-web.eot');
src: url('../fonts/IRANSans-Light-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/IRANSans-Light-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
url('../fonts/IRANSans-Light-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/IRANSans-Light-web.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: 200;
src: url('../fonts/IRANSans-UltraLight-web.eot');
src: url('../fonts/IRANSans-UltraLight-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/IRANSans-UltraLight-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
url('../fonts/IRANSans-UltraLight-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/IRANSans-UltraLight-web.ttf') format('truetype');
}
@font-face {
font-family: IRANSans;
font-style: normal;
font-weight: normal;
src: url('../fonts/IRANSans-web.eot');
src: url('../fonts/IRANSans-web.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('../fonts/IRANSans-web.woff2') format('woff2'), /* Chrome36+, Opera24+*/
url('../fonts/IRANSans-web.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/IRANSans-web.ttf') format('truetype');
}

سپس کافی است به کمک دستور import، فایل fontiran.css را به فایل اصلی css وب سایت خود معرفی کنید.
دستورهای زیر کدهای آغازین فایل style.css را نشان می‌دهد. خط سوم این فایل وظیفه اجرای دستورات داخل فایل fontiran.css را برعهده دارد.

/* فایل اصلی «سی اس اس» که در وب سایت خود استفاده می کنید */
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
body {
font-family: IRANSans;
font-weight: 300;
}
/* سایر دستورات وب سایت */
/* ... */

لازم به ذکر است که کدهای فایل fontiran.css نیاز به تغییر ندارد و در تمام وب سایت ها مشترک است. تنها کاری که این فایل انجام می دهد این است که وزن های مختلف فونت ایران سن سریف را روی سیستم کاربر لود می کند.

روش دوم: قراردادن دستورات و تنظیمات فونت در فایل اصلی css وب سایت

این روش شباهت بسیار زیادی با روش اول دارد. تنها تفاوت در این است که باید دستورات داخل فایل fontiran.css را کپی کرده و در ابتدای فایل اصلی css وب سایت خود قرار دهید. بنابراین دیگر نیازی به استفاده از این فایل نخواهد بود.

استفاده از فایل جداگانه (روش اول) یا قراردادن کدها در یک فایل (روش دوم)

با اینکه نتیجه نهایی یکسان خواهد بود، اما مباحث زیادی درباره مقایسه این دو روش وجود دارد. قبل از اینکه پیشنهاد خود را درباره این موضوع ارائه کنیم، مرور نکات زیر خالی از لطف نیست:

  • در زمان تولید و توسعه وب سایت، جدا بودن فایل ها بسیار مفید تر و کاربردی تر است
  • درصورتیکه اجزای کدهای شخص ثالث (کدهایی که از توسعه دهندگان دیگر در سایت خود استفاده می کنید) را تفکیک شده استفاده کنید، امکان مدیریت و آپدیت آن ها راحت تر است
  • در زمان اجرا و محصول نهایی، بهتر است تمام فایل ها ترکیب شده و تبدیل به یک فایل (ترجیحا فشرده) شوند. این کار باعث ارسال درخواست های کمتر به سرور شده و دستورات و توالی بارگذاری آن ها سریع تر خواهد شد.

پیشنهاد ما: در زمان تولید و توسعه وب سایت، از روش اول (استفاده از فایل fontiran.css و تفکیک فایل ها) استفاده کنید. اما پس از اتمام و در زمان اجرای وب سایت، به صورت دستی یا به کمک ابزارهای فشرده سازی، تمام فایل های css خود را به یک فایل فشرده تبدیل کنید.
نکات:
در استفاده از وب فونت ها توجه شما را به نکات زیر جلب می نماییم:

  • به آدرسی دهی فایل ها دقت کنید. در صورتیکه آدرس های داخل پرانتز مقابل عبارت url به درستی وارد نشود، طبیعتا نتیجه ایده آل را نخواهید داشت
  • ترجیحا حروف بزرگ و کوچک نام فایل ها را در زمان استفاده از آن ها رعایت کنید (case-sensitive)
  • آدرس داخل پرانتز url و نام فونت نیاز به کوتیشن «”» ندارد. اما اگر داخل آدرس یا نام از فاصله (space) استفاده کرده باشید حتما باید از کوتیشن مارک استفاده کنید.
  • اگر از فونت های غیر استاندارد (Farsi_numerals_Non Standard) استفاده می کنید، نام فایل ها را تغییر ندهید. بنابراین بازدیدکننده ها با مشاهده سورس دستورات وب سایت شما، آن ها را با فونت های استاندارد اشتباه نمی گیرند.
اشتراک گذاری این پست :

دیدگاه‌ها

amirnapr@gmail.com
امیر علی پور
۲۶ آبان ۱۳۹۵ در ۲۰:۲۴

دوستانی که موفق به نصب و استفاده از فونت تو سایتشون نشدن بنده با دریافت 5 هزار تومن واسشون انجام میدم
میتونید تماس بگیرید 09126985972 علی پور

daneshvar.mh@gmail.com
محمد
۱۸ آبان ۱۳۹۵ در ۱۹:۲۵

با سلام
من این فونت رو خریدم و کلی سایتم رو زیبا کرد. ممنون فونت ایران.
در صورتی که برخی دوستان در روش نصب این فونت ابهام دارند میتونند از این آدرس ویدئوی آموزشی رو تماشا کنند. به قشنگی امده آموزش داده
https://as4.asset.aparat.com/aparat-video/a_99d14ngqrimjrqqm81o4n31r41mm4qmr1n60p1556272-508b__c8936.mp4

    berozfa@gmail.com
    مجمع طراحان وب و گرافیک ایران
    در پاسخ به محمد
    ۲۶ دی ۱۳۹۵ در ۱۴:۲۶

    تشکر از عزیز دل

    nobatimail@gmail.com
    نوبت دهی
    در پاسخ به محمد
    ۲۳ اردیبهشت ۱۳۹۷ در ۰۱:۰۶

    دمتون گرم
    کارمو راه انداخت
    ممنون از فونت ایران بابت طراحی فونت زیبای ایران سنس

    motekhavari@yahoo.com
    Mahsa
    در پاسخ به محمد
    ۸ آبان ۱۳۹۷ در ۱۸:۲۸

    این ویدئو خیلی عالی بود و کمک کرد بالاخره بتونم فونتمو نصب کنم به درستی، فیلم های سایت کلی گفته بودن و کمکم نکرد. خواستم همینجا تشکر کنم از این کاربر محترم که کاامل و جامع و با توضیحات زیاد اینو برامون باز کرده
    مچکرم

علی ج
۱۱ آبان ۱۳۹۵ در ۲۳:۵۴

سلام اگر در مدت های قبل از این فونت خوب استفاده کرده باشیم به صورت رایگان (البته نمیداستیم) حال باید چطور هزینه قبلی ها رو پرداخت کنیم؟
آیا هر فونت خریدن برای یک دامنه شرعا جایز است؟؟ یا اگر فونت را هزینه اش را بپردازیم برای هر تعداد دامنه میتوانیم استفاده کنیم

    moslmo@yahoo.com
    مدیریت
    در پاسخ به علی ج
    ۱۲ آبان ۱۳۹۵ در ۰۰:۲۰

    یکبار که فونت را خرید کنید کافیست. خیلی از کاربران ابتدا غیرمجاز استفاده می کنند و سپس خرید می کنند.
    پس از خرید برای وبسایت ها یا برنامه هایی که طراحی کرده اید می توانید از درون پنل کاربری لایسنس ثبت کنید.
    پاسخ بقیه پرسش های شما در این صفحه موجود است:
    پرسش‌های متداول درباره اجازه‌نامه فونت

smh361@gmail.com
مهدی
۳۰ مهر ۱۳۹۵ در ۰۰:۵۴

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

    moslmo@yahoo.com
    مدیریت
    در پاسخ به مهدی
    ۳۰ مهر ۱۳۹۵ در ۱۱:۵۸

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

    smh361@gmail.com
    مهدی
    در پاسخ به مهدی
    ۱ آبان ۱۳۹۵ در ۰۹:۵۴

    سلام مجدد. بنده هم از طریق عادی ( بصورت فیلمی که برای درج فونت در وردپرس بود ) و هم از طریق افزونه اقدام کردم ولی نتونستم اون فونتها رو اعمال کنم. ( از قالب انفولد استفاده میکنم. )
    اولا اینکه برای فونت ایران سنس با یک بار آدرس دهی کل چند نوع فونتی که هست در افزونه اضافه میشه یا باید برای هر کدوم یکبار آدرس دهی کنیم؟
    مثلا در حالت استفاده از افزونه مشخص نکردید کدوم نوع فونتها ( woff -eot ,… ) باید آدرس دهی بشه ؟ برای وردپرس کدوم بهتره؟
    اگر چند بار باید آدرس دهی کنیم نام فونت های بعدی ایران سنس رو چی بگذاریم تا مشکلی برای افزونه پیش نیاد ؟
    در توضیحات گفتید ” در فیلد نام فونت، باید نام فونتی که در فایل استایل قالب تعریف کردید را قرار بدهید ” باید این موضوع رو بصورت دستی انجام دهیم ؟
    وقتی متن پیش فرض فونت برای من بنمایش درمیاد مثل تصویر توضیحات شما نیست و شبیه به فونت Arial و یا تاهوما هست.

      moslmo@yahoo.com
      مدیریت
      در پاسخ به مهدی
      ۱ آبان ۱۳۹۵ در ۱۰:۲۶

      ۱- اگر می خواهید از وزن‌های مختلف فونت استفاده کنید روش افزونه چندان مناسب نیست.
      ۲- شما نباید فایل فونت را آدرس دهی کنید. لازم است فایل ‌fontiran.css را آدرس دهی کنید. بهترین فرمت خودبخود لود خواهد شد.
      ۳- برای ایران سنس کافیست در فیلد نام فونت بنویسید: IRANSans
      ۴- اگر متن پیش فرض با فونت ایران سنس نمایش داده نمی‌ شود به معنی این است که فونت را اشتباه نصب کرده اید.