در دنیای وب امروز، سرعت بارگذاری و تجربه کاربری از اهمیت بالایی برخوردارند. یکی از عوامل کلیدی که میتواند بر هر دوی این موارد تأثیر بگذارد، فونتها هستند. بهینهسازی فونتها نه تنها به بارگذاری سریعتر سایت کمک میکند، بلکه تضمین میکند که کاربران شما همواره متنی خوانا و زیبا را مشاهده کنند. در این مقاله به بررسی چگونگی بهینهسازی فونتها با استفاده از CSS و تکنیکهای Fallback میپردازیم.Web Font Optimization
برای استفاده از فونتهای اختصاصی در وبسایت خود، از قانون @font-face در CSS استفاده میکنیم. این بخش به مرورگر میگوید که فونت شما کجاست، چه نامی دارد و چگونه باید نمایش داده شود.
CSS @font-face { font-family: 'yekanbakh-VF'; src:url('font link') format('woff2'); font-weight: 300 900; font-display: swap; ascent-override: 100%; line-gap-override: 0%; }
font-family: نامی که برای فونت خود انتخاب میکنید. این نام در ادامه برای ارجاع به فونت در سایر بخشهای CSS استفاده میشود.
src: آدرس فایل فونت شما را مشخص میکند. فرمت woff2 به دلیل حجم کمتر و پشتیبانی گسترده، بهترین گزینه برای وب است.
font-weight: بازه وزنهای موجود برای فونت شما را تعریف میکند (مثلاً از Light تا Bold).
font-display: swap: این ویژگی به مرورگر میگوید که در صورت عدم بارگذاری فوری فونت، از یک فونت سیستمی جایگزین استفاده کند و پس از بارگذاری کامل، فونت اصلی را نمایش دهد. این کار از "فلش متن بدون استایل" (FOUT) جلوگیری میکند و تجربه کاربری را بهبود میبخشد.
نکته مهم برای کاربران المنتور: قبل از اعمال این کد در المنتور، مطمئن شوید که تمام فونتهای از پیش تعریف شده در المنتور را حذف کردهاید. سپس این کد را به بخش Custom CSS سایت خود اضافه کنید. حتماً مقادیر src و font-family را با مقادیر مربوط به فونت اختصاصی خود جایگزین کنید.
فونت Fallback مکانیزمی است که تضمین میکند حتی اگر فونت اختصاصی شما به هر دلیلی (مثلاً سرعت پایین اینترنت یا خطای سرور) بارگذاری نشود، متن شما همچنان با فونتهای سیستمی قابل دسترس کاربر، به درستی نمایش داده شود. این کار از نمایش متنهای خالی یا نامرتب جلوگیری میکند.
CSS a, p, span, h1, h2, h3, h4, h5, h6, body, li { font-family: 'yekanbakh-VF', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'SamsungOne', 'MiSans', 'Roboto', 'Vazir', Arial, sans-serif !important; }
در این کد، لیست فونتها به ترتیب اولویت نوشته شدهاند. اگر yekanbakh-VF بارگذاری نشود، مرورگر به سراغ 'Segoe UI' میرود و همینطور الی آخر، تا زمانی که فونتی را پیدا کند که روی سیستم کاربر موجود باشد. sans-serif نیز به عنوان یک fallback نهایی برای اطمینان از نمایش صحیح متن در هر شرایطی استفاده میشود.
تنظیمات ascent-override، descent-override و line-gap-override به شما این امکان را میدهند که نحوه رندر شدن فونت را با دقت بیشتری کنترل کنید و از جابجایی طرحبندی (Layout Shift) جلوگیری کنید. این ویژگیها به مرورگر کمک میکنند تا فضایی را برای فونت اختصاصی رزرو کند، حتی قبل از اینکه فونت به طور کامل بارگذاری شود.
ascent-override: بالاترین نقطه فونت را کنترل میکند.
descent-override: پایینترین نقطه فونت را کنترل میکند.
line-gap-override: فاصله بین خطوط متن را تنظیم میکند. تصویر: نمایش بصری ascent-override، descent-override و line-gap-override
استفاده صحیح از این تنظیمات به شما کمک میکند تا تجربه کاربری روانتری را ارائه دهید، زیرا از پرشهای ناگهانی متن هنگام بارگذاری فونت جلوگیری میشود.
بهینهسازی فونتها بخش مهمی از طراحی و توسعه وب است. با استفاده از @font-face برای تعریف فونتهای اختصاصی، پیادهسازی Fallback Font برای پایداری نمایش، و تنظیم دقیق تایپوگرافی با Font Metrics Overrides، میتوانید عملکرد وبسایت خود را بهبود بخشید و تجربه کاربری لذتبخشی را برای بازدیدکنندگان خود فراهم آورید. به یاد داشته باشید که هر گام کوچک در بهینهسازی میتواند تأثیر بزرگی بر سرعت و کیفیت وبسایت شما داشته باشد.
