فونت وب چیست؟ فونت های ایمن و آموزش افزودن فونت به سایت

فونت وب فقط یک انتخاب ظاهری نیست؛ روی خوانایی، هویت برند، سرعت نمایش متن و تجربه کاربر اثر می گذارد. اگر فونت مناسب انتخاب شود اما فایل آن سنگین باشد یا اشتباه بارگذاری شود، کاربر چند لحظه متن خالی می بیند یا بعد از نمایش صفحه با جابه جایی نوشته ها روبرو می شود. از طرف دیگر، تکیه کامل بر یک فونت نصب شده در سیستم ممکن است ظاهر سایت را در دستگاه های مختلف تغییر دهد.

در این راهنما به زبان ساده توضیح می دهیم فونت وب چیست، فونت های ایمن در وب چه تفاوتی با Web Font دارند، کدام فرمت برای سایت مناسب است و چگونه فونت فارسی را با کد @font-face به سایت اضافه کنیم. در ادامه نیز روش های کاهش حجم فونت، تنظیم font-display، استفاده درست از preload و انتخاب یک font stack مطمئن را بررسی می کنیم.

فونت وب چیست؟

فونت وب یا Web Font فایلی است که همراه منابع صفحه از سرور دریافت می شود و مرورگر از آن برای نمایش متن استفاده می کند. برخلاف فونت سیستم، لازم نیست این قلم از قبل روی رایانه یا تلفن کاربر نصب شده باشد. طراح فایل فونت را روی هاست خود یا یک سرویس معتبر قرار می دهد و آن را در CSS معرفی می کند.

این روش اجازه می دهد ظاهر متن در بیشتر دستگاه ها یکسان بماند و تایپوگرافی سایت با هویت بصری برند هماهنگ شود. البته هر فایل فونت یک درخواست شبکه و مقداری حجم به صفحه اضافه می کند. به همین دلیل انتخاب فرمت، تعداد وزن ها و روش بارگذاری اهمیت زیادی دارد.

انتخاب فونت فقط به زیبایی محدود نمی شود. اندازه حروف، فاصله خطوط، ضخامت و تضاد رنگ باید با اصول تایپوگرافی در وب سایت هماهنگ باشد تا متن در موبایل و دسکتاپ راحت خوانده شود.

فونت های ایمن در وب چیستند؟

فونت های ایمن در وب یا Web-Safe Fonts قلم هایی هستند که روی بخش بزرگی از سیستم عامل ها وجود دارند. وقتی در CSS از این فونت ها استفاده می کنید، مرورگر معمولا نیازی به دانلود فایل جدا ندارد و متن را سریع نمایش می دهد. Arial، Tahoma، Verdana، Georgia و Times New Roman از نمونه های شناخته شده این گروه هستند.

هیچ فونتی روی صد درصد دستگاه ها تضمین نشده است. راه درست این است که چند انتخاب را به ترتیب اولویت در ویژگی font-family بنویسیم. مرورگر نخستین فونت موجود را انتخاب می کند و اگر هیچ کدام در دسترس نباشند، از خانواده عمومی انتهای فهرست کمک می گیرد.

body {
  font-family: Tahoma, Arial, sans-serif;
}

به این فهرست font stack گفته می شود. استفاده از sans-serif، serif یا monospace در انتهای آن ضروری است، زیرا آخرین راه مرورگر برای نمایش خوانای متن محسوب می شود.

بهترین فونت های ایمن برای سایت

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

فونت های Sans-serif

فونت های بدون سریف ظاهر ساده و خوانایی مناسبی در نمایشگر دارند. Arial انتخابی عمومی است و Tahoma به دلیل فرم متراکم تر، در بسیاری از رابط های فارسی قدیمی استفاده شده است. Verdana نیز فاصله و ارتفاع مناسبی برای اندازه های کوچک دارد، اما فضای بیشتری اشغال می کند. برای یک رابط مدرن می توان از system-ui استفاده کرد تا هر سیستم عامل قلم رابط خودش را نشان دهد.

فونت های Serif

Georgia و Times New Roman دارای زائده های انتهای حروف هستند و بیشتر برای متن های رسمی، نقل قول یا مقاله های انگلیسی کاربرد دارند. Georgia برای نمایشگر طراحی شده و در اندازه مناسب خواناست. در متن فارسی بهتر است پیش از انتخاب نهایی، شکل حروف، اعداد، نشانه ها و ترکیب فارسی و انگلیسی را روی چند دستگاه آزمایش کنید.

فونت های Monospace

در فونت Monospace عرض همه کاراکترها تقریبا یکسان است. این ویژگی برای نمایش کد، دستورهای ترمینال و داده های ستونی مفید است. Courier New و Consolas نمونه های رایج هستند، اما همیشه باید monospace را به عنوان fallback در انتهای فهرست قرار دهید.

تفاوت فونت وب و فونت ایمن چیست؟

فونت ایمن از قلم های نصب شده روی دستگاه استفاده می کند، اما فونت وب از سرور دانلود می شود. بنابراین فونت ایمن سرعت اولیه خوبی دارد و به درخواست شبکه وابسته نیست؛ در مقابل، فونت وب کنترل بیشتری بر شکل حروف و هویت برند می دهد.

این دو رقیب هم نیستند. حتی وقتی از فونت وب فارسی استفاده می کنید، به یک فونت ایمن یا خانواده عمومی به عنوان fallback نیاز دارید. کاربر در فاصله دانلود فایل، هنگام خطای شبکه یا در مرورگری که فایل را دریافت نمی کند باید همچنان متن را ببیند.

راهکار عملی این است: یک فونت وب بهینه برای ظاهر اصلی سایت انتخاب کنید و یک font stack نزدیک به آن بسازید تا حالت جایگزین سریع و کم جابه جایی باشد.

فرمت های فونت سایت؛ WOFF2 یا TTF؟

مرورگر برای استفاده از فونت وب باید قالب فایل را بشناسد. در بیشتر پروژه های امروزی WOFF2 انتخاب اصلی است، چون برای وب طراحی شده و فشرده سازی بهتری از قالب های قدیمی دارد. WOFF می تواند برای برخی محیط های قدیمی تر به عنوان fallback باقی بماند.

تبدیل فرمت به تنهایی کافی نیست. مجوز فونت باید اجازه استفاده وب را بدهد و فایل نباید شامل وزن ها یا نویسه های غیرضروری باشد. برای فارسی، حذف اشتباه نویسه ها در فرایند subset می تواند باعث نمایش مربع یا fallback ناخواسته شود؛ پس نسخه نهایی را با حروف فارسی، اعداد فارسی و انگلیسی و علائم نگارشی آزمایش کنید.

آموزش افزودن فونت به سایت با @font-face

برای افزودن فونت به سایت، فایل WOFF2 را در پوشه ای مانند /fonts/ قرار دهید و سپس یک قانون @font-face در CSS بنویسید. نام خانواده دلخواه است، اما باید در تعریف و هنگام مصرف دقیقا یکسان باشد.

@font-face {
  font-family: "SiteFont";
  src: url("/fonts/site-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "SiteFont", Tahoma, Arial, sans-serif;
}

در کد بالا مرورگر وزن 400 را به عنوان حالت معمولی می شناسد. اگر فایل وزن 700 دارید، یک قانون جدا با همان font-family و مقدار font-weight: 700 بسازید. تعریف همه فایل ها با وزن 400 باعث می شود مرورگر ضخامت مصنوعی تولید کند و کیفیت حروف کاهش یابد.

در فونت متغیر می توان بازه وزن را تعریف کرد، اما فقط وقتی فایل واقعا Variable Font است:

@font-face {
  font-family: "SiteVariable";
  src: url("/fonts/site-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

جزئیات کامل ویژگی های این قانون در مستندات رسمی MDN درباره @font-face آمده است. نام ویژگی درست font-family است و نوشتن عبارتی مانند font-face داخل بلوک، یک خطای CSS محسوب می شود.

آموزش افزودن فونت فارسی به وردپرس

در وردپرس نیز منطق همان است: فایل فونت را در هاست قرار دهید، @font-face را به CSS اضافه کنید و خانواده را به عناصر مورد نظر بدهید. تفاوت اصلی این است که تغییرات باید در جایی ثبت شوند که با به روزرسانی قالب از بین نروند.

1. نسخه قانونی و بهینه WOFF2 فونت را آماده کنید.
2. فایل را در پوشه فونت قالب فرزند یا مسیر مدیریت شده دیگری آپلود کنید.
3. قانون @font-face را در فایل CSS قالب فرزند یا بخش CSS سفارشی وارد کنید.
4. وزن های 400، 500، 700 و هر وزن مورد استفاده را با فایل درست تطبیق دهید.
5. فونت را برای body، تیترها یا اجزای مشخص اعمال کنید.
6. کش سایت و CDN را پاک کنید و نتیجه را در موبایل و دسکتاپ آزمایش کنید.

اگر قالب بخشی برای مدیریت فونت دارد، ابتدا همان گزینه را بررسی کنید. نصب افزونه فقط برای کاری که با تنظیمات قالب یا چند خط CSS انجام می شود همیشه ضروری نیست. تغییر مستقیم فایل اصلی قالب نیز پیشنهاد نمی شود، چون در به روزرسانی بعدی ممکن است از بین برود.

بهینه سازی فونت سایت برای سرعت

بیشترین مشکل فونت های وب معمولا از تعداد فایل زیاد، وزن های بلااستفاده و بارگذاری دیرهنگام می آید. ابتدا مشخص کنید واقعا به چه وزن هایی نیاز دارید. اگر بدنه فقط وزن 400 و تیتر فقط وزن 700 دارد، بارگذاری پنج وزن دیگر ارزشی برای کاربر ایجاد نمی کند.

• برای مرورگرهای مدرن WOFF2 را در اولویت قرار دهید.
• فقط وزن ها و حالت های مورد استفاده را بارگذاری کنید.
• در صورت امکان نویسه های غیرضروری را با دقت حذف کنید.
• فایل فونت را با کش طولانی و آدرس نسخه دار ارائه دهید.
• از چند سرویس و دامنه مختلف برای فونت های یک صفحه استفاده نکنید.
• fallback نزدیک به فونت اصلی انتخاب کنید تا جابه جایی متن کم شود.
• فقط فونت حیاتی بالای صفحه را preload کنید.

font-display چه مقداری داشته باشد؟

ویژگی font-display رفتار مرورگر را هنگام انتظار برای فونت تعیین می کند. انتخاب درست به اولویت پروژه بستگی دارد.

swap جلوی متن نامرئی طولانی را می گیرد، اما اگر اندازه fallback با فونت اصلی خیلی متفاوت باشد می تواند CLS ایجاد کند. optional برای عملکرد سخت گیرانه مناسب است. تصمیم را با اندازه گیری واقعی بگیرید، نه فقط یک توصیه ثابت.

آیا باید فونت را preload کنیم؟

preload دانلود یک منبع حیاتی را زودتر شروع می کند، اما استفاده بیش از حد می تواند پهنای باند را از CSS، تصویر اصلی یا منابع مهم تر بگیرد. فقط فایلی را preload کنید که در ابتدای صفحه مصرف می شود و مطمئن هستید کاربر به آن نیاز دارد.

<link rel="preload"
      href="/fonts/site-font.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

وجود crossorigin در preload فونت مهم است، حتی اگر فایل از همان دامنه دریافت شود. برای بررسی دقیق تر می توانید راهنمای رسمی بهترین روش های بارگذاری فونت در web.dev را مطالعه کنید.

افزایش بازدید سایت

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

افزایش بازدید سایت

تاثیر فونت بر Core Web Vitals و سئو

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

برای کاهش جابه جایی، fallback را از نظر ارتفاع حروف و عرض تقریبی به فونت اصلی نزدیک کنید. ویژگی های پیشرفته CSS مانند size-adjust، ascent-override و descent-override نیز امکان هماهنگ کردن معیارهای فونت جایگزین را می دهند، اما باید با داده واقعی و تست مرورگر تنظیم شوند.

پس از اعمال تغییرات، صفحه را با PageSpeed Insights و ابزارهای توسعه مرورگر آزمایش کنید. در تب Network ببینید چند فایل فونت دریافت می شود، حجم هر کدام چقدر است و آیا فایل بلااستفاده وجود دارد. نتیجه آزمایش واقعی کاربران از یک امتیاز آزمایشگاهی مهم تر است.

اصول خوانایی فونت فارسی در سایت

یک فونت سریع اگر خوانا نباشد هدف صفحه را خراب می کند. انتخاب فونت فارسی باید با متن واقعی انجام شود، نه فقط یک تیتر نمونه. پاراگراف بلند، اعداد، لینک، دکمه، قیمت و ترکیب فارسی و انگلیسی را کنار هم آزمایش کنید.

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

تغییر فونت می تواند ارتفاع اجزا، شکست خطوط و حتی اندازه دکمه ها را عوض کند. به همین دلیل باید صفحه را در عرض های مختلف و همراه دیگر اجزای رابط کاربری و تجربه کاربری بررسی کنید. اگر داده مقایسه ای دارید، ارائه آن در یک جدول HTML ریسپانسیو فهم مطلب را سریع تر می کند.

اشتباهات رایج در استفاده از فونت وب

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

• تعریف فرمت اشتباه: برای فایل WOFF2 باید format("woff2") نوشته شود.
• بارگذاری همه وزن ها: هر فایل اضافه، حجم و درخواست شبکه بیشتری ایجاد می کند.
• نداشتن fallback: خطای دانلود نباید متن را ناخوانا یا ناپدید کند.
• استفاده از تصویر به جای متن: متن داخل تصویر انتخاب، جستجو و سازگاری مناسبی ندارد.
• بی توجهی به مجوز: خرید نسخه دسکتاپ همیشه به معنای مجوز وب نیست.
• تعریف وزن نادرست: هر فایل باید با وزن واقعی خود معرفی شود.
• preload بیش از حد: منابع کم اهمیت نباید با فایل های حیاتی رقابت کنند.
• تست نکردن فارسی: کامل بودن حروف، اعداد و علائم باید بررسی شود.

برای لوگوی برند می توان از تصویر یا SVG استفاده کرد، اما بدنه مقاله، منو و اطلاعات تماس باید متن واقعی HTML باشند. اگر تصویر حاوی توضیح مهم است، ویژگی alt مناسب برای آن بنویسید؛ با این حال alt جایگزین طراحی متن به شکل تصویر نیست.

چک لیست انتخاب بهترین فونت برای سایت

برای این که بتوانیم بهترین فونت را برای سایت خود انتخاب کنیم، رعایت چک لیست زیر می تواند به ما کمک کند:

1. هدف صفحه و لحن برند را مشخص کنید.
2. خوانایی فارسی و ترکیب فارسی و انگلیسی را بسنجید.
3. مجوز استفاده از فونت در وب را بررسی کنید.
4. نسخه WOFF2 و وزن های ضروری را آماده کنید.
5. برای هر وزن، @font-face صحیح تعریف کنید.
6. یک font stack نزدیک و مطمئن بسازید.
7. font-display را متناسب با اولویت صفحه انتخاب کنید.
8. فقط فایل حیاتی را در صورت نیاز preload کنید.
9. صفحه را در موبایل، دسکتاپ و چند مرورگر آزمایش کنید.
10. تعداد درخواست، حجم فونت و CLS را بعد از انتشار اندازه بگیرید.

اگر میان دو فونت مردد هستید، نسخه ساده ای از صفحه را با هر دو بسازید و از کاربران واقعی بازخورد بگیرید. فونتی که در یک پوستر زیباست لزوما برای خواندن مقاله طولانی مناسب نیست. تصمیم درست ترکیبی از خوانایی، هماهنگی با برند، پشتیبانی از نویسه ها و هزینه عملکردی است.

سخن پایانی

فونت وب به شما امکان می دهد ظاهر متن را در دستگاه های مختلف کنترل کنید، در حالی که فونت های ایمن بدون دانلود فایل و با تکیه بر سیستم کاربر نمایش داده می شوند. در یک سایت حرفه ای معمولا از هر دو استفاده می شود: WOFF2 بهینه برای ظاهر اصلی و یک font stack ایمن برای نمایش سریع و حالت خطا.

برای افزودن فونت به سایت، فایل قانونی و کم حجم را با @font-face معرفی کنید، وزن ها را درست بنویسید و fallback مناسب داشته باشید. سپس با حذف فایل های اضافی، تنظیم font-display و preload محدود، سرعت و پایداری صفحه را بهبود دهید. در نهایت نتیجه را با متن فارسی واقعی و داده های Core Web Vitals بسنجید؛ انتخابی که هم خوانا باشد و هم سریع، بهترین فونت برای سایت شماست.