روش نصب وب فونت‌های ایران سنس

حتما به یاد می آورید که در سالیان گذشته، تعداد فونت هایی که در وب سایت ها استفاده می شد بسیار محدود بود. شاید بتوان از دو فونت Arial و Tahoma به عنوان تنها انتخاب طراحان وب، مخصوصا برای زبان فارسی نام برد. اینکه چرا با وجود تعداد زیادی فونت فقط از این دو گزینه استفاده می شد سوال سخت و پیچیده ای نیست. دلیل اول این بود که کاربر (بازدید کننده) باید قبل از مشاهده وب سایت، فونت مورد نظر را نصب کرده باشد که طبیعتاً تضمینی برای اینکه تمام بازدیدکننده ها فونت را داشته باشند وجود نداشت. دلیل دیگر هم استاندارد نبودن فونت های دیگر بود. به شکلی که هر فونت در مرورگرها و سیستم عامل های مختلف با رفتار متفاوت از جانب موتور رندرسازی مواجه می شد.
با ورود CSS نسخه ۳ و توسعه امکانات مرورگرها، امکان لود شدن فونت روی سیستم کاربر معرفی شد. این قابلیت مشکل اول را برطرف می کرد. اما هنوز هم عدم وجود فونت های استاندارد مناسب، زیبا و خوانا طراحان را مجبور به انتخاب همان فونت های قبلی می کرد.
خوشبختانه مدتی است طراحان ایرانی توجه بیشتری به فونت ها نشان داده اند. اما هنوز بعضی از دوستان برای قرار دادن وب فونت در وب سایت خود مشکلاتی دارند. برای همین قصد داریم در ادامه مطلب نحوه نصب و استفاده از وب فونت‌ در وب سایت را به زبان ساده توضیح دهیم.
در این مطلب آموزشی، برای استفاده از وب فونت‌های خانواده فونت ایران سن سریف یکی از دو روش زیر پیشنهاد می شود:

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

در ابتدا دو فولدر css_woff و fonts که در فولدر webfonts (بسته دانلودی) قرار دارد را در مقصد کپی کنید.

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

فایل  fontiran.css حاوی دستورات و تنظیمات برای لود شدن تمامی وزن های ایران سنس سریف است.
محتویات این فایل fontiran.css (موجود در فولدر css_woff) مشابه دستورات زیر است:

/* این فایل وظیفه تعریف و بارگذاری فونت های «فونت ایران» را برعهده دارد */
/* پیشنهاد می شود از این روش استفاده کنید */

@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/IRANSans-Bold-web.woff') format('woff');  /* All Major Browsers */
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/IRANSans-Medium-web.woff') format('woff');  /* All Major Browsers */
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/IRANSans-Light-web.woff') format('woff');  /* All Major Browsers */
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/IRANSans-UltraLight-web.woff') format('woff');  /* All Major Browsers */
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/IRANSans-web.woff') format('woff');  /* All Major Browsers */
}

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

/* فایل اصلی «سی اس اس» که در وب سایت خود استفاده می کنید */

@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */

body {
	font-family: IRANSans;
	font-weight: 300;
}

/* سایر دستورات وب سایت */
/* ... */

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

همانطور که در کدهای بالا مشاهده می کنید، تنها از نوع (فرمت) woff استفاده شده است. وب فونت‌های woff توسط تمام مرورگرها پشتیبانی می‌شود.

نگران کاربرانی که از نسخه‌های قدیمی (آپدیت نشده) مرورگرها استفاده می‌کنند نباشید. در واقع آن‌ها وبسایت شما را با فونت پیش‌فرض موجود بر روی سیستم خود مانند Tahoma خواهند دید که با توجه به ضعیف بودن گرافیک در سیستم این کاربران وضوح فونت پیشفرض از وب‌فونت‌های ایران سنس بهتر خواهد بود.

با این توضیحات باز ممکن است مایل باشید از سایر فرمت ها (ttf, eot, woff2) نیز استفاده کنید. برای این کار باید از فایل 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');
}

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

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

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

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

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

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

نکات:
در استفاده از وب فونت ها توجه شما را به نکات زیر جلب می نماییم:

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

در انتها خواهشمندیم نظرات و پیشنهادات خود در این زمینه را با ما در میان بگذارید.

  • برچسب‌ها:

نظرات کاربران

  • حمید گفت:

    درصورتی که تم child داشته باشیم به چه صورت است؟ چرا در فایل خریداری شده اسم فولدر ها و فایل ها تغییر کرده اند؟! میشه بیشتر راهنمایی کنید؟! ممنون

  • mehran گفت:

    سلام فونت ایران سنس رو خریداری کردم و قصد دارم در وبسایت استفاده کنم برای وبسایت هم به وسیله وردپرس و با قالب انفولد (فعلا در لوکال هاست زمپ) سایت رو راه اندازی کردم و فونت رو در پوشه فونت قالب قرار دادم و کدها رو هم در فایل css قالب قراردادم اما سایت باز هم با فونتهای قبلی نشون داده میشه. (البته قالب انفولد خودش یک ویرایشگر داره که توش 63 عدد فونت هست و میشه اون فونت هارو انتخاب کرد اما فونت ایران سنس به این لیست اضافه نشده تا ازش استفاده کنم) چیکار باید بکنم؟

  • با سلام خدمت همه دوستان عزیز

    با استفاده از آموزش های بالا خیلی خیلی ساده تونستم فونت سایت خودم رو که تحت وردپرس هست تغییر بدم

    فقط چند مورد مهم
    توی بعضی سایت ها بسته به نوع قالب و طراح ممکنه یخورده تغییراتی در روند کار پیش بیاد

    اول اینکه حتما فایل ها و پوشه هایی که در بالا ذکر گردید که در کنار فایل index کپی بشن باید این مورد رو هم ذکر کنیم که منظور از فایل index فایل درون پوشه قالب هست
    پوشه قالب هم اینجا قرار داره :
    وارد سی پنل که شدین

    public_html/wp-content/themes/servatasan/

    مثلا قالب سایت ما servatasan نام داره
    توی همین پوشه قالب خودتون که اینجا ( servatasan) هستس اون دوتا پوشه بالایی رو بریزین

    سپس کد فراخوانی رو که این کد باشه :

    @import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */

    body {
    font-family: IRANSans;
    font-weight: 300;
    }

    علاوه بر اینکه توی فایل style.css کپیش کردم تو فایل rtl.css هم که توی همون قالب هست کپی کردم

    نکته دوم اینکه : توی فایل style.css بگردین که شاید خیلی از کدها به صورت دستی فراخوانی فونت دیگه ای رو داشته باشه

    مثل این کدها : font-family: Byekan, arial, Georgia, serif;

    با استفاده از کلید میانبر کنترل + اچ (ctrl+h) پنجره ریپلیس بالا میاد

    که توی قسمت اول byekan
    و در قسمت دوم که زیرش هست IRANSans

    رو تایپ می کنیم سپس روی کلید Replace کلیک می کنیم متوجه میشید که نوشته byekan به نوشته IRANSans تغییر پیدا می کنه

    البته اگه روی کلید ALL که روبروی Replace قرار داره کلیک کنید به یکباره همه جایگزینی ها در تمای کدها صورت میگیره

    این نکته آخر واسه قالب من خیلی مهم بود و تا اینکار رو انجام ندادم هیچ تغیری در فونت سایت من صورت نگرفت

    در پناه خداوند شاد ، سلامت و سعادتمتد دنیا و آخرت شوید

  • حسام گفت:

    سلام
    آیا امکان دارد بدون تغییر فونت اعداد بر اساس Context نمایش داده شود و با هر دو فرمت انگلیسی یا فارسی نوشته شود ؟
    مثلا در متن زیر عدد باید به صورت انگلیسی باشد:
    “This is 1st suggestion”
    یا در متن زیر به صورت فارسی باشد:
    “شما 2 راه بیشتر ندارید”
    در نمونه کارهایی که دیدم، مثلا دیجی کالا، اسم اصلی کالا که به صورت انگلیسی بوده، اعداد داخل متن به صورت فارسی است!

    ممنون.

  • taha گفت:

    سلام خسته نباشید می خواستم بدونم مشکل عدم نمایش فارسی اعداد در فونت ایران سنس رو چطور میتونم حل کنم من فونتو خریداری کردم اما این مشکلو داره اگه میشه لطف کنین راهنمایی کنین با تشکر

  • مصطفی گفت:

    سلام
    یک سری قالب های وردپرس این امکان را داره که فونت مورد نظر را آپلود کنید و برای قسمت های مختلف مثل هدینگ و … سایز و فاصله خطوط و … را مشخص کنید
    فرمت svg را هم میشه اضافه کرد که فونت شما نداره و به نظرم خوبه اضافه بشه

    2 تا سوال دارم:
    1) اگه فقط حالت معمولی فونت را آپلود کنی و بقیه کارها مثل bold کردن را با css انجام بدیم عیب داره؟
    2) این فایل style.css که به ما داده شده برای چی هست و روی چه حسابی یک سری اسم کلاس تعیین شده؟ چون اسم کلاس و css ها در هر سایتی میتونه متفاوت باشه

    سپاس

    • مدیریت گفت:

      فرمت svg تقریبا کاربردی نداره فقط برای مرورگرهای گوشی های خیلی قدیمی اپل
      اگر در قالب اپلود این فرمت اجباری هست با کانورتورهای انلاین تبدیل کنید.
      1: بله خودکار بولد شدن فونت را خراب می کنه. بهتر با کلاس BOLD فایل مربوطه لود و جایگزین بشه
      2: بله نام کلاس ها اختیاری هست.

  • chiman گفت:

    سلام. من فایل فونت ایزانسنس رو از وبسایت شما خریداری کردم ولی فایل دریافتی با چیزیکه در این صفحه هست تفاوت دارد. فونت دریافتی IRAN هست.

  • پویا گفت:

    سلام.این فونت در ویندوز فرم(سی شارپ) مشکل دارد و فونت بی کیفیت نمایش داده می سود!!چندتا از دوستان تهیه کردن و مشکل مشابه دارن.ممنون میشم کمک کنید

    • مدیریت گفت:

      کیفیت رندر گرافیکی فونت به موتور استفاده شده در آن برنامه یا سیستم عامل دارد.
      در مورد محیط برنامه نویسی شما باید خروجی را چک کنید. معمولا این افت کیفیت در محیط سمت کاربر وجود ندارد.

  • Sadegh Karimi nasab گفت:

    با سلام فونت ایران سنس را از شما خریداری کردم برای نصب وب با جوملا بر روی XAMPP آچطور میتونم نصبش کنم

دیدگاهتان را بنویسید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.