قبلا طراحی ظاهر سایت به انعطاف پذیری امروزی نبود و مشکلات و سختی‌های خاص خود را داشت، یکی از این مشکلات استفاده از فونت‌ها بود. در استفاده از فونت‌ها محدودیت‌هایی وجود داشت و طراح سایت باید از فونت‌هایی استفاده می‌کرد که کاربر بر روی سیستم نصب کرده بود و یا اگر فونت مورد نظر نصب نبود باید دستی آن را بر روی لوکال سیستم نصب می‌کرد. اما در حال حاضر این مشکل وجود ندارد و این مشکلات به صورت کامل حل شده است. این مشکل به لطف به کار گیری فونت آنلاین حل شده است.
فونت آنلاین چیست؟
خب همانطور که در بالا گفتیم در زمان گذشته باید برای نشان دادن درست وب سایت‌ها با فونت استفاده شده در سیستم لوکال کاربر، باید آن فونت بر روی سیستم لوکال کاربر نصب شود. اما امروزه این مشکل به لطف استفاده از فونت آنلاین حل شده است.
فونت آنلاین به این صورت است که با باز کردن وب سایت مورد نظر، فایل‌های فونت مورد نظر از طریق کد نویسی در دسترس قرار می‌گیرند و به شکل آنلاین فراخوانی خواهد شد و وب سایت به شکل درست و با فونت درست نمایش داده می‌شود.
فونت‌ها امروزه برای استفاده شدن فشرده سازی می‌شوند، این کار به سرعت لود وب سایت‌ها اضافه می‌کند چون حجم آن را به شدت کاهش می‌دهد.
پسوند فونت آنلاین :
- TTF : رایج‌ترین و اولین قالب فونت آنلاین است
- EOT : یک فونت آنلاین منبع باز است که می‌توان آن را به دلخواه تغییر داد و به یکی از انواع آن تبدیل کرد
- WOFF : مخصوص استفاده در صفحات سایت بوده
- WOFF2 : از طریق فشرده‌سازی و تغییر در اندازه WOFF ایجاد شد
نکته : بعضی از این فونت‌های آنلاین دارای لایسنس بوده و برای استفاده باید لایسنس آن را خریداری کنید.
فونت آنلاین چگونه کار می‌کند؟
اگر شما از فونت آنلاین استفاده کنید کار بسیار راحتی در پیش دارید چرا که اگر حتی فونتی که استفاده می‌کنید بر روی سیستم لوکال کاربر هم نباشد، فونت وب سایت شما به هم نمی‌خورد. خب این داستان به چه شکل است؟ کاربری برای اولین بار از طریق مرورگر وارد وب سایت شما می‌شود، در ابتدا مرورگر بر روی سیستم شما به دنبال فونتی که در سایت استفاده شده است، می‌گردد. اگر فونت مورد نظر در لیست فونت‌های نصب شده در سیستم شما باشد از همان استفاده می‌کند اما اگر فونت مورد نظر در این لیست نباشد آن فونت را از اینترنت و کدهای سایت می‌گیرد و به این ترتیب فونت سایت به درستی نشان داده می‌شود.
همه تنظیمات ظاهری سایت از طریق فایل‌های سی اس اس انجام می‌شود. فونت‌ها نیز از طریق یک ویژگی با نام Font-Family مشخص می‌شود. برنامه نویس مبتدی از یک فونت در سایت استفاده می‌کند اما برنامه نویس حرفه‌ای از چند فونت استفاده می‌کند تا اگر یکی از فونت‌ها لود نشد از دیگر فونت‌های مشخص شده استفاده کند. شما از طریق یک سرور فونت مانند Google یا Typekit به فونت‌های آنلاین دسترسی داشته باشید. برای فراخوانی فونت‌های آنلاین در CSS می‌توانید از font-face استفاده کرد.
مزیت استفاده از فونت آنلاین
مزیت بسیار ویژه فونت‌های آنلاین، استفاده از تایپوگرافی به جای تصاویر است. این کار هم بر روی سرعت لود وب سایت اثر می‌گذارد هم در سئوی وب سایت تاثیر بسزایی دارد زیرا موتورهای جستجوی گوگل حروفی که به شکل تصویر باشد را به سختی تشخیص می‌دهد.
نکته : بعضی از مرورگرها از فونت‌های آنلاین پشتیبانی نمی‌کنند که در این صورت باید از بعضی توابع کتابخانه‌ای زبان برنامه نویسی جاوا اسکریپت استفاده کنید تا مشکل برطرف شود.
فونت آنلاین مناسب برای وب سایت
همانطور که استفاده از فونت مناسب به درک کاربر از یک کسب و کار کمک بسیار زیادی می‌کند و باعث زیبایی ظاهری آن وب سایت می‌شود، استفاده از فونت نامناسب باعث تجربه کاربری بدی می‌شود که این موضوع به شدت مهم است. زمانی که برای طراحی وبسایت به دنبال فونت مناسبی هستید باید دقت داشته باشید که آن فونت از لحاط ظاهری زیبا، خوانا و واضح باشد. هر قسمت از وب سایت باید دارای اندازه و فونت مخصوص(یک فونت با اندازه و ضخامت متفاوت) باشد تا تجربه کاربری خوبی را خلق کند.
فونت‌های آنلاین در تمام دستگاه‌ها و مرورگرها به درستی کار می‌کند. بعد از اینکه مرورگرهای اینترنت از فونت‌های مختلف فارسی پشتیبانی کردند، سایت‌ها نیز به سرعت از فونت‌های مختلفی مثل نازنین، میترا، رویا، ایران‌سنس و یکان در گرافیک سایت خود استفاده کردند. فونت‌های آنلاین فارسی شامل ایران‌سنس و ایران‌یکان از جمله فونت‌های محبوب کاربران فارسی زبان است.
