استفاده از فونت های وب در طراحی با HTML و CSS

استفاده از فونت های وب در طراحی وب سایت با HTML و CSS به طراحان امکان می دهد تا بدون اتکا به فونت های نصب شده روی سیستم کاربر، از تایپ فیس های متنوع و منحصربه فردی برای بهبود تجربه بصری و خوانایی محتوا استفاده کنند. این رویکرد به ویژه برای حفظ هویت بصری برند و افزایش جذابیت بصری صفحات وب ضروری است.

در طراحی وب مدرن، انتخاب فونت مناسب تأثیر چشمگیری بر تجربه کاربری، برندینگ، خوانایی و زیبایی شناسی کلی یک وب سایت دارد. فونت ها صرفاً ابزاری برای نمایش متن نیستند؛ آن ها حامل لحن، شخصیت و هویت یک برند هستند. فونت های Web-Safe که بر روی اکثر سیستم ها نصب شده اند، گزینه های محدودی را در اختیار طراحان قرار می دهند و نمی توانند پاسخگوی نیازهای بصری پیچیده و خلاقانه باشند. اینجاست که مفهوم فونت های وب (Web Fonts) مطرح می شود. فونت های وب، فونت هایی هستند که همراه با محتوای وب سایت از سرور بارگذاری می شوند و تضمین می کنند که تایپ فیس مورد نظر طراح، بدون توجه به فونت های موجود بر روی سیستم بازدیدکننده، به درستی نمایش داده شود. این مقاله به عنوان یک راهنمای جامع و کاربردی، تمامی جنبه های استفاده از فونت های وب در پروژه های HTML و CSS را، از مفاهیم پایه تا پیاده سازی پیشرفته و بهینه سازی عملکرد، مورد بررسی قرار می دهد.

آشنایی با مفاهیم پایه فونت های وب

برای درک اهمیت و کاربرد فونت های وب، لازم است ابتدا تفاوت آن ها را با فونت های سنتی و Web-Safe مشخص کنیم. این تمایز، پایه ای برای انتخاب رویکرد صحیح در پیاده سازی تایپوگرافی در وب سایت ها فراهم می آورد.

فونت های Web-Safe در مقابل فونت های وب

فونت های Web-Safe

فونت های Web-Safe به مجموعه ای از فونت ها اطلاق می شود که به طور گسترده بر روی اکثر سیستم عامل ها (ویندوز، macOS، لینوکس و …) نصب شده اند. این فونت ها تضمین می کنند که متن در اکثر مرورگرها و دستگاه ها به طور یکسان نمایش داده شود، زیرا مرورگر نیازی به بارگذاری فونت از خارج ندارد و از فونت های محلی سیستم کاربر استفاده می کند.

از جمله رایج ترین فونت های Web-Safe می توان به موارد زیر اشاره کرد:

• Arial
• Verdana
• Helvetica
• Georgia
• Times New Roman
• Courier New

اگرچه استفاده از فونت های Web-Safe از نظر سازگاری و سرعت بارگذاری مزایایی دارد، اما محدودیت های قابل توجهی را نیز به همراه دارد. تنوع بصری کم، عدم توانایی در ایجاد هویت بصری منحصر به فرد و ظاهر تکراری از جمله معایب اصلی این رویکرد است. این محدودیت ها، طراحان را به سمت استفاده از فونت های وب سوق داده است.

فونت های وب (Web Fonts)

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

نحوه عملکرد فونت های وب به این صورت است که توسعه دهنده وب با استفاده از قانون @font-face در CSS، مسیر فایل های فونت را به مرورگر معرفی می کند. مرورگر سپس این فایل ها را دانلود کرده و برای رندر کردن متن به کار می برد. مزایای اصلی استفاده از فونت های وب عبارتند از:

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

آشنایی با فرمت های رایج فونت وب

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

WOFF و WOFF2 (Web Open Font Format)

WOFF (نسخه ۱) و WOFF2 (نسخه ۲) فرمت های پیشنهادی و بهینه سازی شده برای وب هستند. WOFF2 جدیدترین و کارآمدترین فرمت است که نسبت به WOFF فشرده سازی بهتری ارائه می دهد و در نتیجه حجم فایل فونت را کاهش داده و سرعت بارگذاری صفحه را بهبود می بخشد. استفاده از این دو فرمت برای وب سایت های مدرن ضروری است.

TTF (TrueType Font) و OTF (OpenType Font)

TTF و OTF فرمت های سنتی فونت هستند که بیشتر برای استفاده در سیستم عامل ها و نرم افزارهای دسکتاپ رایج بودند. اگرچه مرورگرهای مدرن از این فرمت ها پشتیبانی می کنند، اما به دلیل حجم بالاتر و عدم فشرده سازی بهینه، استفاده مستقیم از آن ها به عنوان تنها فرمت در وب توصیه نمی شود. با این حال، داشتن نسخه های TTF یا OTF به عنوان یک جایگزین (fallback) برای مرورگرهای قدیمی تر یا در کنار WOFF/WOFF2 می تواند مفید باشد.

EOT (Embedded OpenType)

EOT یک فرمت اختصاصی است که توسط مایکروسافت توسعه یافته و عمدتاً برای پشتیبانی از فونت ها در مرورگرهای قدیمی اینترنت اکسپلورر (IE) مورد استفاده قرار می گرفت. اگرچه با کاهش استفاده از IE، اهمیت این فرمت نیز کاهش یافته، اما برای پروژه هایی که نیاز به پشتیبانی گسترده از مرورگرهای قدیمی دارند، هنوز ممکن است لازم باشد.

SVG (Scalable Vector Graphics)

فرمت SVG نیز می تواند برای فونت ها به کار رود، به ویژه برای مرورگرهای قدیمی تر موبایل (مانند Safari در iOS 4.2 و قبل از آن). فونت های SVG ماهیت برداری دارند و مقیاس پذیری بالایی ارائه می دهند، اما حجم فایل آن ها معمولاً بالاتر از فرمت های WOFF است.

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

نیاز به ارائه چندین فرمت از یک فونت به دلیل تفاوت در پشتیبانی مرورگرها از فرمت های مختلف فونت است. برای مثال، یک مرورگر ممکن است فقط از WOFF2 پشتیبانی کند، در حالی که دیگری به WOFF نیاز داشته باشد و یک مرورگر قدیمی تر ممکن است تنها EOT را تشخیص دهد. با ارائه چندین فرمت، اطمینان حاصل می کنیم که فونت مورد نظر در گسترده ترین طیف از مرورگرها و دستگاه ها به درستی نمایش داده می شود.

برای اطمینان از سازگاری حداکثری فونت های وب، همواره توصیه می شود حداقل فرمت های WOFF2 و WOFF را ارائه دهید و در صورت نیاز به پشتیبانی از مرورگرهای قدیمی تر، TTF و EOT را نیز اضافه کنید.

جدول زیر به مقایسه فرمت های رایج فونت وب می پردازد:

فرمت فونت	سال معرفی/توصیه	سازگاری مرورگر	مزایا	معایب
WOFF2	2015 (W3C Recommendation)	عالی (اکثر مرورگرهای مدرن)	بهترین فشرده سازی، کوچکترین حجم فایل، عملکرد بالا	عدم پشتیبانی از مرورگرهای بسیار قدیمی
WOFF	2009 (W3C Recommendation)	بسیار خوب (مرورگرهای مدرن و نسبتاً قدیمی)	فشرده سازی خوب، تعادل بین سازگاری و حجم	فشرده سازی کمتر از WOFF2
TTF / OTF	1980s / 1990s	گسترده (توسط اکثر مرورگرها پشتیبانی می شود)	فرمت سنتی، رایج در دسکتاپ	حجم فایل بالا، فشرده سازی کمتر، عملکرد ضعیف تر در وب
EOT	1997	فقط اینترنت اکسپلورر قدیمی (IE6-IE11)	پشتیبانی از IE قدیمی	اختصاصی مایکروسافت، حجم بالا، منسوخ شده
SVG	2001 (for fonts)	مرورگرهای قدیمی موبایل (iOS 4.2-)	مقیاس پذیری بالا، ماهیت برداری	حجم فایل بالا، پیچیدگی در برخی موارد، منسوخ شده برای وب فونت

استفاده از فونت های وب به روش محلی (@font-face)

استفاده از قانون @font-face در CSS متداول ترین روش برای بارگذاری فونت ها به صورت محلی در پروژه وب شماست. این روش به شما کنترل کاملی بر فایل های فونت و نحوه بارگذاری آن ها می دهد.

قدم اول: یافتن و دانلود فونت های مورد نظر

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

• منابع فونت های رایگان:
  • Font Squirrel: این وب سایت یکی از بهترین منابع برای یافتن فونت های رایگان با مجوز استفاده تجاری و وب است. ویژگی برجسته آن، ابزار Webfont Generator است که فایل های فونت دسکتاپ (TTF/OTF) را به فرمت های بهینه وب تبدیل می کند و کد CSS @font-face را نیز تولید می نماید.
  • dafont: مجموعه ای عظیم از فونت های رایگان را ارائه می دهد، اما باید حتماً مجوز استفاده (لایسنس) هر فونت را بررسی کنید، زیرا بسیاری از آن ها فقط برای استفاده شخصی رایگان هستند.
  • Google Fonts: اگرچه بیشتر به عنوان یک سرویس آنلاین شناخته می شود، اما امکان دانلود فونت ها برای استفاده محلی نیز فراهم است. این فونت ها اغلب دارای مجوز SIL Open Font License هستند که امکان استفاده رایگان در پروژه های شخصی و تجاری را فراهم می کند.
• منابع فونت های تجاری:
  • MyFonts, Fonts.com, Adobe Fonts (Typekit): این پلتفرم ها مجموعه های گسترده ای از فونت های پریمیوم را برای خرید ارائه می دهند. برای استفاده از این فونت ها در وب، لازم است مجوز وب فونت را تهیه کنید که معمولاً بر اساس میزان بازدید صفحه یا دامنه وب سایت محاسبه می شود.

نکات مهم درباره لایسنس فونت

لایسنس فونت یکی از مهم ترین جنبه هایی است که اغلب نادیده گرفته می شود. هر فونت دارای یک مجوز استفاده (لایسنس) است که تعیین می کند شما چگونه می توانید از آن استفاده کنید. تفاوت های مهمی بین لایسنس های دسکتاپ و وب وجود دارد:

• لایسنس دسکتاپ: به شما اجازه نصب فونت بر روی کامپیوتر شخصی و استفاده از آن در نرم افزارهای طراحی (مانند فتوشاپ، ایلاستریتور) را می دهد.
• لایسنس وب: به شما اجازه می دهد فایل های فونت را بر روی سرور وب سایت خود قرار داده و از طریق @font-face آن ها را بارگذاری کنید. این لایسنس ها اغلب با محدودیت هایی مانند تعداد بازدید صفحه یا دامنه وب سایت همراه هستند.

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

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

پس از دانلود فونت ها، مرحله بعدی آماده سازی آن ها برای استفاده بهینه در وب است. این مرحله شامل تبدیل فرمت ها و سازماندهی فایل ها در پروژه می شود.

استفاده از ابزارهای تولید Webfont (Webfont Generators)

بهترین روش برای آماده سازی فونت ها، استفاده از ابزارهای تولید Webfont است. وب سایت هایی مانند Font Squirrel Webfont Generator این امکان را فراهم می کنند که فونت های TTF یا OTF خود را آپلود کرده و خروجی را در فرمت های بهینه وب (WOFF2, WOFF) همراه با کد @font-face آماده دریافت کنید. این ابزارها همچنین قابلیت های پیشرفته ای مانند Subsetting (حذف کاراکترهای غیرضروری برای کاهش حجم) را ارائه می دهند.

ساختار پوشه ها

برای حفظ نظم در پروژه، پیشنهاد می شود فایل های فونت را در یک پوشه اختصاصی، مثلاً fonts/ یا assets/fonts/، در ریشه پروژه خود ذخیره کنید. این کار به مدیریت آسان تر مسیردهی فایل ها در CSS کمک می کند.

قدم سوم: پیاده سازی فونت با استفاده از قانون @font-face در CSS

قانون @font-face هسته اصلی بارگذاری فونت های محلی در CSS است. این قانون به شما اجازه می دهد تا یک نام دلخواه برای خانواده فونت تعریف کرده و مسیر فایل های آن را مشخص کنید.

توضیح کامل سینتکس @font-face

سینتکس پایه @font-face به صورت زیر است:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('fonts/MyCustomFont-Regular.woff') format('woff'),
       url('fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* کنترل رفتار نمایش فونت */
}

• font-family: این ویژگی یک نام دلخواه برای خانواده فونت شما تعریف می کند. این نام همان چیزی است که بعدها در ویژگی font-family عناصر HTML برای اعمال فونت به کار می رود. انتخاب نامی توصیفی و منحصر به فرد اهمیت دارد.
• src: این ویژگی مسیر فایل های فونت را مشخص می کند. می توانید چندین url() را با کاما از هم جدا کنید تا مرورگر اولین فرمتی را که پشتیبانی می کند، بارگذاری کند. ترتیب در اینجا بسیار مهم است؛ فرمت های بهینه و جدیدتر (مانند WOFF2) باید در ابتدا قرار گیرند و فرمت های قدیمی تر (مانند TTF) در انتها بیایند. تابع format() (اختیاری اما توصیه شده) نوع فرمت فایل را مشخص می کند و به مرورگر کمک می کند تا سریع تر تصمیم بگیرد کدام فایل را دانلود کند.
• font-weight و font-style: این ویژگی ها به شما امکان می دهند تا وزن (ضخامت) و استایل (مثلاً عادی، ایتالیک، بولد) فونت را تعریف کنید. اگر یک خانواده فونت دارای وزن ها و استایل های مختلفی است (مثلاً Regular, Bold, Italic)، بهتر است برای هر کدام یک بلوک @font-face جداگانه با font-weight و font-style متناسب تعریف کنید. این کار باعث می شود که مرورگر بتواند به طور هوشمندانه نسخه صحیح فونت را بر اساس ویژگی های CSS اعمال شده به متن انتخاب کند، به جای اینکه مجبور باشید نام های font-family متفاوتی برای هر وزن/استایل داشته باشید.
• unicode-range (مقدماتی): این ویژگی به شما اجازه می دهد تا زیرمجموعه ای از کاراکترها را از یک فونت بارگذاری کنید. برای فونت های فارسی که کاراکترهای زیادی دارند، می توانید از این ویژگی برای بارگذاری تنها کاراکترهای فارسی استفاده کنید تا حجم فونت دانلود شده کاهش یابد.

مثال عملی کامل با کد

فرض کنید می خواهیم از فونت های فارسی Vazirmatn برای متن اصلی و Shabnam برای عناوین استفاده کنیم. ابتدا فایل های فونت را در پوشه fonts/ پروژه خود قرار دهید.

کد HTML (index.html):

<!DOCTYPE html>
<html lang=fa dir=rtl>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <title>استفاده از فونت های وب</title>
    <link rel=stylesheet href=style.css>
</head>
<body>
    <h1>راهنمای جامع فونت های وب در طراحی سایت</h1>
    <p>این یک متن نمونه است که از فونت سفارشی Vazirmatn برای خوانایی بهتر استفاده می کند. فونت های وب به زیبایی و تجربه کاربری وب سایت شما عمق می بخشند.</p>
    <h2>اهمیت انتخاب فونت</h2>
    <p>انتخاب فونت مناسب نه تنها بر ظاهر بصری تأثیر می گذارد، بلکه می تواند حس و حال و اعتبار محتوای شما را نیز منتقل کند.</p>
    <div class=highlight>
        <p>این بخش با فونت متمایزی نمایش داده می شود تا توجه خواننده را جلب کند.</p>
    </div>
</body>
</html>

کد CSS (style.css):

/* تعریف فونت Vazirmatn */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-Regular.woff2') format('woff2'),
         url('fonts/Vazirmatn-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* تعریف فونت Shabnam */
@font-face {
    font-family: 'Shabnam';
    src: url('fonts/Shabnam-Bold.woff2') format('woff2'),
         url('fonts/Shabnam-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    direction: rtl; /* برای نمایش صحیح متن فارسی */
    text-align: right; /* برای تراز راست متن فارسی */
    font-family: 'Vazirmatn', Arial, sans-serif; /* اعمال فونت Vazirmatn به کل بدنه */
    line-height: 1.6;
    margin: 20px;
    color: #333;
    font-size: 18px;
}

h1, h2 {
    font-family: 'Shabnam', 'Vazirmatn', sans-serif; /* اعمال فونت Shabnam به عناوین */
    color: #0056b3;
    font-weight: bold; /* اطمینان از اعمال وزن bold تعریف شده در @font-face */
}

.highlight {
    background-color: #e0f2f7;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-family: 'Vazirmatn', sans-serif; /* در اینجا Vazirmatn برای متن داخلی استفاده شده */
    font-size: 1.1em;
}

در این مثال، دو فونت Vazirmatn و Shabnam به صورت محلی بارگذاری شده اند. برای Vazirmatn وزن عادی (Regular) و برای Shabnam وزن Bold تعریف شده است. سپس، این فونت ها با استفاده از ویژگی font-family به عناصر body، h1، h2 و .highlight اعمال شده اند.

پشتیبانی مرورگرها (ویژگی font-display در CSS)

ویژگی font-display در قانون @font-face برای کنترل نحوه نمایش متن در حین بارگذاری فونت های وب استفاده می شود. این ویژگی کمک می کند تا از پدیده هایی مانند Flash of Unstyled Text (FOUT) یا Flash of Invisible Text (FOIT) جلوگیری شود و تجربه کاربری بهتری فراهم آید.

• swap: مرورگر در ابتدا از یک فونت جایگزین (fallback) استفاده می کند و پس از بارگذاری کامل فونت وب، آن را با فونت اصلی جایگزین می کند. این رایج ترین و توصیه شده ترین مقدار است، زیرا تضمین می کند متن بلافاصله قابل مشاهده است.
• fallback: یک دوره زمانی بسیار کوتاه (مثلاً ۱۰۰ میلی ثانیه) برای نمایش متن نامرئی در نظر گرفته می شود (FOIT)، سپس یک فونت جایگزین نمایش داده می شود. اگر فونت وب در این دوره یا در مدت زمان بارگذاری آن (معمولاً حدود ۳ ثانیه) بارگذاری شود، جایگزین می گردد.
• optional: این مقدار نیز شامل یک دوره FOIT کوتاه است، اما اگر فونت وب در آن دوره بارگذاری نشود، از فونت جایگزین استفاده می کند و دیگر تلاش نمی کند فونت اصلی را بارگذاری کند. این گزینه برای فونت هایی است که کمتر برای محتوای اصلی حیاتی هستند و عملکرد وب سایت در اولویت قرار دارد.

استفاده از سرویس های آنلاین فونت

سرویس های آنلاین فونت، راهکاری ساده تر و کارآمدتر برای مدیریت و بارگذاری فونت های وب ارائه می دهند. این سرویس ها، فونت ها را بر روی سرورهای خود میزبانی می کنند و از طریق CDN (شبکه توزیع محتوا) آن ها را به کاربران تحویل می دهند.

مزایای استفاده از سرویس های آنلاین

• سادگی پیاده سازی: نیاز به مدیریت فایل های فونت و نوشتن کد پیچیده @font-face را از بین می برد. تنها کافی است یک یا دو خط کد را به HTML یا CSS خود اضافه کنید.
• بهره مندی از CDN: فونت ها از نزدیک ترین سرور CDN به کاربر تحویل داده می شوند که سرعت بارگذاری را به طور قابل توجهی افزایش می دهد.
• بهینه سازی خودکار: این سرویس ها معمولاً فونت ها را به طور خودکار فشرده سازی و بهینه سازی می کنند و بهترین فرمت ها را برای مرورگرهای مختلف ارائه می دهند.
• مدیریت لایسنس: بسیاری از این سرویس ها (مانند Google Fonts) فونت هایی با مجوزهای استفاده آزاد ارائه می دهند که نگرانی های مربوط به لایسنس را کاهش می دهد.
• کشینگ (Caching): اگر فونتی قبلاً توسط کاربر در وب سایت دیگری که از همان سرویس فونت استفاده کرده، بارگذاری شده باشد، از کش مرورگر استفاده می شود و نیازی به دانلود مجدد نیست.

آموزش گام به گام استفاده از Google Fonts

Google Fonts محبوب ترین و رایگان ترین سرویس فونت آنلاین است که مجموعه ای وسیع از فونت های با کیفیت را برای استفاده در وب سایت ها ارائه می دهد.

1. انتخاب فونت از وب سایت Google Fonts:
   به وب سایت fonts.google.com بروید. می توانید فونت های مورد نظر خود را با استفاده از فیلترها (زبان، سبک، وزن) جستجو کنید. برای فونت های فارسی، فیلتر Languages را روی Persian تنظیم کنید.
2. انتخاب سبک ها (Weights) و دریافت کد:
   پس از انتخاب فونت، بر روی آن کلیک کنید تا وارد صفحه جزئیات فونت شوید. در اینجا می توانید سبک های مختلف فونت (مثلاً Regular, Bold, Italic) را که می خواهید استفاده کنید، انتخاب نمایید. با انتخاب هر سبک، Google Fonts یک کد HTML <link> و یک کد CSS font-family تولید می کند.
3. افزودن کد به HTML:
   کد <link> تولید شده را در بخش <head> فایل HTML خود قرار دهید. این خط کد مسئول بارگذاری فایل های فونت از سرورهای گوگل است.

   
   <!-- مثال برای فونت Vazirmatn و Shabnam -->
   <link rel=preconnect href=https://fonts.googleapis.com>
   <link rel=preconnect href=https://fonts.gstatic.com crossorigin>
   <link href=https://fonts.googleapis.com/css2?family=Shabnam&family=Vazirmatn:wght@400;700&display=swap rel=stylesheet>
       

4. اعمال فونت در CSS:
   اکنون می توانید از نام خانواده فونت که توسط Google Fonts ارائه شده، در فایل CSS خود استفاده کنید.

   
   body {
       font-family: 'Vazirmatn', sans-serif;
   }
   
   h1, h2 {
       font-family: 'Shabnam', sans-serif;
   }
       

معرفی مختصر سایر سرویس های فونت آنلاین

• Adobe Fonts (Typekit): این سرویس بخشی از اشتراک Creative Cloud ادوبی است و مجموعه ای از فونت های با کیفیت بالا را ارائه می دهد که به راحتی در وب سایت ها قابل استفاده هستند.
• Fontspring: علاوه بر فروش فونت، سرویس های میزبانی وب فونت را نیز ارائه می دهد.

مقایسه جامع روش محلی و سرویس آنلاین

انتخاب بین روش بارگذاری محلی و استفاده از سرویس های آنلاین فونت به نیازهای خاص پروژه و اولویت های شما بستگی دارد.

ویژگی	روش محلی (@font-face)	سرویس آنلاین (مثل Google Fonts)
کنترل بر فایل ها	کامل (میزبانی بر روی سرور خودتان)	محدود (فایل ها توسط سرویس میزبانی می شوند)
سهولت پیاده سازی	نیاز به تبدیل فرمت ها و تنظیمات @font-face	بسیار آسان (کپی و چسباندن کد)
عملکرد و سرعت	وابسته به بهینه سازی دستی (فشرده سازی، ساب ستینگ) و کیفیت سرور شما. اگر به درستی بهینه سازی شود، می تواند بسیار سریع باشد.	معمولاً بسیار سریع (استفاده از CDN و بهینه سازی خودکار توسط سرویس)
مدیریت لایسنس	مسئولیت کامل با شماست، باید مجوز وب فونت را تهیه کنید.	اغلب فونت های رایگان با مجوز آزاد، یا مدیریت توسط سرویس (برای فونت های پولی)
پشتیبانی مرورگر	باید چندین فرمت را برای پوشش کامل مرورگرها ارائه دهید.	سرویس به طور خودکار بهترین فرمت را برای هر مرورگر ارائه می دهد.
قابلیت اطمینان	وابسته به پایداری سرور شما.	بالا (میزبانی بر روی سرورهای ابری با پایداری بالا)
حجم فایل	وابسته به تعداد سبک ها و فرمت های بارگذاری شده.	معمولاً بهینه تر به دلیل فشرده سازی پیشرفته و Subsetting.

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

بهینه سازی فونت های وب نه تنها به سرعت بارگذاری وب سایت کمک می کند، بلکه تأثیر مستقیمی بر تجربه کاربری و رتبه SEO دارد. فونت های سنگین می توانند سرعت سایت را به شدت کاهش دهند، که گوگل آن را به عنوان یک عامل منفی در رتبه بندی در نظر می گیرد.

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

فونت ها می توانند بخش قابل توجهی از حجم کلی یک صفحه وب را تشکیل دهند. دانلود فونت های بزرگ یا زیاد می تواند باعث تأخیر در نمایش محتوا (render-blocking) شود و تجربه کاربری ضعیفی ایجاد کند. بهینه سازی، تضمین می کند که این تأثیرات منفی به حداقل برسند و متن به سرعت و با کیفیت بالا به کاربر نمایش داده شود.

تکنیک های کلیدی بهینه سازی

• انتخاب فرمت های بهینه:
  همانطور که پیش تر ذکر شد، فرمت های WOFF2 و WOFF به دلیل فشرده سازی بالا و پشتیبانی گسترده از مرورگرهای مدرن، بهترین گزینه ها هستند. سعی کنید از این دو فرمت در اولویت استفاده کنید و TTF/OTF را فقط به عنوان جایگزین های نهایی (fallback) در نظر بگیرید.
• Subsetting (زیرمجموعه سازی فونت):
  بسیاری از فونت ها، به خصوص فونت های لاتین، شامل هزاران کاراکتر برای زبان های مختلف، نمادها، کاراکترهای ریاضی و غیره هستند. اگر شما فقط به یک زیرمجموعه خاص از این کاراکترها (مثلاً حروف فارسی یا اعداد) نیاز دارید، می توانید فونت را زیرمجموعه سازی کنید. این کار با حذف کاراکترهای غیرضروری، حجم فایل فونت را به شدت کاهش می دهد. ابزارهایی مانند Font Squirrel Webfont Generator یا ابزارهای آنلاین دیگر این قابلیت را فراهم می کنند.
• فشرده سازی GZIP/Brotli در سرور:
  اطمینان حاصل کنید که سرور وب شما برای فایل های فونت (همانند سایر فایل های استاتیک) فشرده سازی GZIP یا Brotli را فعال کرده است. این فشرده سازی در سطح سرور، حجم فایل های دانلود شده را کاهش می دهد و به سرعت بارگذاری کمک می کند. معمولاً این کار به صورت خودکار توسط سرویس های میزبانی خوب انجام می شود، اما در صورت لزوم باید تنظیمات سرور را بررسی کنید.
• استفاده از CDN (شبکه توزیع محتوا):
  CDNها فایل های استاتیک (از جمله فونت ها) را بر روی سرورهای متعددی در نقاط جغرافیایی مختلف ذخیره می کنند. وقتی کاربری به وب سایت شما مراجعه می کند، فونت ها از نزدیک ترین سرور CDN به او تحویل داده می شوند که latency (تأخیر) را کاهش داده و سرعت بارگذاری را افزایش می دهد. سرویس های آنلاین فونت به طور ذاتی از CDN استفاده می کنند.
• ویژگی font-display در CSS:
  این ویژگی (که پیش تر توضیح داده شد) برای کنترل رفتار نمایش فونت در هنگام بارگذاری ضروری است. مقادیر swap و fallback به ویژه برای بهبود تجربه کاربری و جلوگیری از صفحات خالی یا متن نامرئی توصیه می شوند.

  
  @font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2');
    font-display: swap; /* نمایش فوری متن با فونت جایگزین */
  }
      

Font Stacks (پشته فونت)

مفهوم پشته فونت به معنی تعریف چندین فونت جایگزین در ویژگی font-family است. این کار تضمین می کند که حتی اگر فونت اصلی وب سایت به هر دلیلی (مثلاً مشکل در بارگذاری یا عدم پشتیبانی مرورگر) بارگذاری نشود، متن با یک فونت جایگزین قابل قبول نمایش داده شود. مرورگر به ترتیب لیست، فونت ها را بررسی می کند تا اولین فونتی را که بر روی سیستم کاربر در دسترس است، پیدا کرده و اعمال کند.

یک پشته فونت استاندارد معمولاً شامل موارد زیر است:

1. فونت وب اصلی: فونت سفارشی که می خواهید نمایش داده شود.
2. فونت Web-Safe: یک فونت رایج و Web-Safe با ظاهری مشابه یا نزدیک به فونت اصلی.
3. فونت عمومی (Generic Family): یک خانواده فونت عمومی مانند serif، sans-serif، monospace، cursive یا fantasy. این ها به مرورگر اجازه می دهند تا فونت پیش فرض خود را از آن خانواده انتخاب کند.

مثال عملی از پشته فونت برای فونت فارسی:

body {
    font-family: 'Vazirmatn', 'B Nazanin', Arial, sans-serif;
}

در این مثال:

• 'Vazirmatn' فونت وب اصلی است.
• 'B Nazanin' یک فونت جایگزین فارسی رایج است که ممکن است روی سیستم های ویندوز موجود باشد.
• Arial یک فونت Web-Safe برای متون لاتین و به عنوان جایگزین عمومی است.
• sans-serif به مرورگر می گوید که اگر هیچ کدام از فونت های قبلی در دسترس نبود، یک فونت عمومی از خانواده sans-serif را انتخاب کند.

فونت های متغیر (Variable Fonts)

فونت های متغیر یک پیشرفت قابل توجه در فناوری فونت هستند. برخلاف فونت های سنتی که برای هر وزن (مثلاً Light, Regular, Bold) یا استایل (مثلاً Italic) نیاز به یک فایل فونت جداگانه دارند، فونت های متغیر تمامی این حالات را در یک فایل منفرد و فشرده شامل می شوند.

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

رفع مشکلات رایج در استفاده از فونت های وب (Troubleshooting)

استفاده از فونت های وب می تواند با چالش هایی همراه باشد. درک مشکلات رایج و راه حل های آن ها برای توسعه دهندگان وب ضروری است.

فونت ها بارگذاری نمی شوند

• مسیرهای اشتباه در url(): متداول ترین مشکل، اشتباه در تعیین مسیر فایل فونت در src: url() است. اطمینان حاصل کنید که مسیرها (نسبی یا مطلق) به درستی به فایل های فونت اشاره می کنند. بررسی مسیرها در ابزارهای توسعه دهنده مرورگر (Developer Tools) در بخش Network می تواند مفید باشد.
• مشکلات CORS (Cross-Origin Resource Sharing): اگر فونت های شما از دامنه ای متفاوت با دامنه وب سایت شما میزبانی می شوند، ممکن است با خطاهای CORS مواجه شوید. سرور میزبان فونت باید هدر Access-Control-Allow-Origin را به درستی تنظیم کند تا اجازه بارگذاری فونت از دامنه های دیگر داده شود. برای فونت های محلی، اطمینان حاصل کنید که فونت ها بر روی همان دامنه ای که وب سایت شما قرار دارد، میزبانی می شوند یا تنظیمات CORS سرور شما درست است.
• اشتباهات در سینتکس @font-face: یک کامای اضافی، پرانتز بسته نشده یا املای اشتباه در ویژگی های @font-face می تواند منجر به عدم بارگذاری فونت شود. سینتکس را با دقت بررسی کنید.
• خطاهای سرور: مطمئن شوید فایل های فونت روی سرور وجود دارند و با مجوزهای دسترسی صحیح (permissions) تنظیم شده اند. خطاهای 404 (Not Found) در بخش Network ابزارهای توسعه دهنده مرورگر نشان دهنده این مشکل هستند.

فونت ها در مرورگرهای قدیمی نمایش داده نمی شوند

اگر وب سایت شما نیاز به پشتیبانی از مرورگرهای بسیار قدیمی (مانند IE11 یا نسخه های قدیمی تر موبایل) دارد، ممکن است لازم باشد فرمت های فونت بیشتری مانند EOT و SVG را نیز در src قانون @font-face خود لحاظ کنید. ترتیب قرارگیری فرمت ها نیز مهم است؛ EOT معمولاً در ابتدا قرار می گیرد تا مرورگرهای قدیمی آن را زودتر پیدا کنند.

@font-face {
    font-family: 'MyOldBrowserFont';
    src: url('fonts/MyOldBrowserFont.eot'); /* IE9- */
    src: url('fonts/MyOldBrowserFont.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
         url('fonts/MyOldBrowserFont.woff2') format('woff2'),
         url('fonts/MyOldBrowserFont.woff') format('woff'),
         url('fonts/MyOldBrowserFont.ttf') format('truetype'),
         url('fonts/MyOldBrowserFont.svg#MyOldBrowserFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

مشکلات خوانایی یا اندازه فونت

• تنظیمات font-size: اندازه فونت را متناسب با دستگاه و محتوا تنظیم کنید. از واحدهای نسبی مانند em، rem یا vw/vh برای اطمینان از واکنش گرا بودن اندازه فونت استفاده کنید.
• line-height (ارتفاع خط): فاصله بین خطوط متن برای خوانایی بسیار مهم است. مقدار مناسب line-height معمولاً بین 1.4 تا 1.8 برای متن اصلی توصیه می شود.
• letter-spacing (فاصله حروف) و word-spacing (فاصله کلمات): تنظیم این ویژگی ها می تواند به بهبود خوانایی کمک کند، به خصوص برای فونت های خاص یا در اندازه های بسیار بزرگ/کوچک.
• text-rendering: این ویژگی (با مقادیر optimizeLegibility یا geometricPrecision) می تواند به مرورگر کمک کند تا متن را با کیفیت بالاتری رندر کند، به ویژه در مرورگرهای مبتنی بر WebKit.

Flash of Unstyled Text (FOUT) یا Flash of Invisible Text (FOIT)

این پدیده ها زمانی رخ می دهند که فونت های وب در حال بارگذاری هستند:

• FOUT (Flash of Unstyled Text): متن در ابتدا با یک فونت جایگزین (معمولاً Web-Safe) نمایش داده می شود و پس از بارگذاری فونت وب، به فونت اصلی تغییر می کند. این تغییر ناگهانی می تواند آزاردهنده باشد.
• FOIT (Flash of Invisible Text): متن تا زمانی که فونت وب به طور کامل بارگذاری شود، نامرئی باقی می ماند. این پدیده تجربه کاربری بسیار بدی ایجاد می کند، زیرا کاربر برای مدت زمانی متن را نمی بیند.

راه حل ها:

• استفاده از font-display: swap;: همانطور که قبلاً توضیح داده شد، این بهترین راه حل برای جلوگیری از FOIT و به حداقل رساندن FOUT است، زیرا بلافاصله یک فونت جایگزین را نمایش می دهد.
• استفاده از JavaScript (Web Font Loader): کتابخانه های جاوااسکریپت مانند Web Font Loader (توسط Google) به شما کنترل دقیق تری بر فرآیند بارگذاری فونت می دهند. این کتابخانه ها کلاس های CSS را به <html> اضافه می کنند که وضعیت بارگذاری فونت را نشان می دهد (مثلاً font-loading, font-loaded, font-failed). می توانید از این کلاس ها برای اعمال استایل های خاص (مثلاً پنهان کردن متن تا بارگذاری کامل فونت) استفاده کنید.

/* مثال CSS با Web Font Loader */
.font-loading body {
  visibility: hidden; /* پنهان کردن متن در حین بارگذاری */
}

.font-loaded body {
  visibility: visible; /* نمایش متن پس از بارگذاری */
}

نتیجه گیری

استفاده صحیح و بهینه از فونت های وب، عنصری حیاتی در طراحی وب سایت های مدرن و کاربرپسند است. این فونت ها فراتر از صرفاً نمایش متن عمل می کنند؛ آن ها به وب سایت شما شخصیت می بخشند، خوانایی را بهبود می بخشند و به تقویت هویت بصری برند شما کمک شایانی می کنند. از طریق بارگذاری محلی با قانون @font-face یا استفاده از سرویس های آنلاین مانند Google Fonts، طراحان وب می توانند به طیف گسترده ای از تایپ فیس های منحصر به فرد دسترسی پیدا کنند.

با رعایت بهترین شیوه ها در بهینه سازی (مانند انتخاب فرمت های بهینه، Subsetting و استفاده از font-display) و آگاهی از راه حل های مشکلات رایج، می توانید تجربه ای بی نقص و سریع را برای کاربران خود فراهم آورید. فونت های وب، اگرچه نیازمند درک فنی هستند، اما مزایای بصری و عملکردی آن ها بی شمار است و سرمایه گذاری در یادگیری و پیاده سازی صحیح آن ها، قطعاً به نتایج درخشانی در پروژه های وب شما منجر خواهد شد. توصیه می شود این مفاهیم را در پروژه های خود به کار گیرید تا عمق و پویایی بیشتری به طراحی های وب خود ببخشید.