استفاده بهینه از فونت ها در وب – قسمت اول

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

در قسمت اول نگاهی خواهیم داشت به وضعیت استفاده از فونت ها در وب.

طبق بررسی سایت httparchive.org از 300 هزار سایت پربازدید دنیا نشون می ده در مدت کمتر از یک سال استفاده سایت ها از فونت های اختصاصی بیش از 2 برابر شده و هم اکنون 44% نیز از این قابلیت در حال استفاده هستند.

font-use2014

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

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

اما چطور می توان استفاده از آن ها را بهینه تر کرد؟ در زیر 4 راه ممکن عنوان شده است:

  1. تعداد و تنوع فونت های استفاده شده در صفحه
  2. مجموع حجمی که فونت ها به صفحه اضافه می کنند
  3. نوع انتقال فونت ها از سرور به سیستم کاربر
  4. زمانی لود شدن فونت ها و موضوع اهمیت ترتیب در لود شدن اجزای یک صفحه

دو مورد اول به صورت مستقیم به نوع طراحی و استفاده طراح از فونت در صفحه بستگی دارد. فونت بیشتر به معنای درخواست (request) بیشتر و حجم بیشتر صفحه است. از لحاظ UX نیز پیشنهاد می شود تعداد فونت های استفاده شده را در پایین ترین سطح ممکن قرار دهید که با قوانین سرعت و کارائی صفحه نیز هماهنگ است.

موضوعاتی که در قسمت های بعدی در مورد آن ها خواهم نوشت:

  • معرفی سرویس Google WebFont و بررسی آن
  • استفاده بهینه از سرویس Google Webfont
  • نحوه پردازش فونت ها توسط مرورگرها و تفاوت رفتار آن ها
  • بهترین زمان برای لود شدن فونت ها در صفحه
  • استفاده از فونت های فارسی در وب
  • نکات استفاده از فونت فارسی در کنار فونت های انگلیسی
  • اتفاقات سمت کاربر و سمت سرور برای بهبود کش شدن فونت ها
  • نمایش بهتر فونت ها در صفحه
  • بهترین نحوه لود فونت و استفاده از آن در تم های وردپرس
  • معرفی و استفاده از اسکریپت Web Font Loader
  • و یکسری نکات و مسائل ه دیگه