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

حتما به یاد می آورید که در سالیان گذشته، تعداد فونت هایی که در وب سایت ها استفاده می شد بسیار محدود بود. شاید بتوان از دو فونت 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) استفاده می کنید، نام فایل ها را تغییر ندهید. بنابراین بازدیدکننده ها با مشاهده سورس دستورات وب سایت شما، آن ها را با فونت های استاندارد اشتباه نمی گیرند.

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

اشتراک گذاری این پست :

دیدگاه‌ها

ifarazir@gmail.com
فراز
۲۲ اسفند ۱۳۹۴ در ۲۳:۰۱

سلام
من اعدادم به انگلیسی میادش . چیکار کنم تا فارسی بیاد؟

malakoutian@chmail.ir
malakoutian
۲۱ اسفند ۱۳۹۴ در ۰۲:۲۵

سلام
من برای نصب فونت ایران سنس تمام مراحل بالا را به دقت چندین بار انجام دادم اما فونت لود نمی شود میشه راهنمایی فرمائید علت چه چیزهایی می تونه باشه؟
ممنون

    moslmo@yahoo.com
    مدیریت
    در پاسخ به malakoutian
    ۲۲ اسفند ۱۳۹۴ در ۰۲:۰۱

    ممکن است دلایل مختلفی داشته باشد. اما مهمترین آنها معمولا آدرس دهی اشتباه فونت‌ها در فایل css و یا اینکه استایل های متن روی فونت ایران سنس تنظیم نشده باشد.

fox2030@gmail.com
هادی
۲ دی ۱۳۹۴ در ۱۸:۱۵

سلام
با توضیحات بالا فونت ایران سنس رو به سایت اضافه کردم اما چطور میتونم از فونت ایران شارپ در تگ های عنوان (H6 تا H1) استفاده کنم؟
ممنون

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

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

amiremami1989@gmail.com
امیر
۲۱ آذر ۱۳۹۴ در ۱۱:۲۲

سلام و خسته نباشید. خواستم نظرمو درباره مقالتون بگم. واقعا جای همچین مقاله هایی در وب فارسی خالی هست. واقعا ممنون که از این دست مطالب آموزشی قرار می دید. خیلی مفیده. اما مخالف قسمتی از اون هستم. جایی که می گید: «ازٌ آٍنجاییکه نیازٌی به استفاده ازٌ سایر فرمت های فونت نیست و فرمت woff کفایت می کند، ممکن است در نسخه های آٍینده فونت ها این فرمت ها وجود نداشته باشد»
کاملا مخالف حذف شدن فرمت های دیگه هستم. این نظر شماست که نیازی به سایر فرمت های دیگه نیست و به نظر منم کاملا اشتباه هست. شما به جایی که پیشرفت کنید و از فرمت های جدیدتر و بهتر استفاده کنید عقب گرد می کنید؟! تمامی فرمت ها به خصوص woff2 باید در پکیج فونت قرار داشته باشن. این فرمت از همه سریع تر دانلود می شه و در مرورگرهای کروم و فایرفاکس و اپرا که بیشترین استفاده کننده رو دارن ساپورت می شه.
http://caniuse.com/#feat=woff2
چرا از woff2 هم استفاده کنیم؟ برای اینکه مدت دانلود این فرمت ۳۰ تا ۵۰ درصد سریع تر از نسل اول این فرمت هست. توی طراحی سایت، ۵ ۶ سال پیش، ثانیه ها مهم بودن، الان میلی ثانیه ها مهم هستن.
نتیجه بررسی سرعت لود فرمت woff2
http://www.w3.org/TR/WOFF20ER
یک سایتی که با استاندارد روز طراحی می شه، از هر ۴ فرمت فونت استفاده می کنه. برای اینکه بدونید گوگل در این مورد چه روشی رو پیشنهاد می کنه؟
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en
There isn’t a single format that works in all browsers, which means that we need to deliver multiple formats to provide a consistent experience:
Serve WOFF 2.0 variant to browsers that support it
Serve WOFF variant to majority of browsers
Serve TTF variant to old Android (below 4.4) browsers
Serve EOT variant to old IE (below IE9) browsers
برای همین پیشنهاد می ده که از تمامی فرمت ها با هم استفاده شه.
ممنون ازتون و امیدوارم که سایر فرمت هارو حذف نکنید.