Font Library در وردپرس یک سیستم مدیریت متمرکز فونت است که با معرفی theme.json و ویرایشگر سایت، فرآیند افزودن، حذف و پیکربندی فونت‌ها را بدون نیاز به کدنویسی ممکن کرده است. این قابلیت که از وردپرس ۶.۵ معرفی شد، مدیریت فونت را از پراکندگی در فایل‌های CSS و افزونه‌های شخص ثالث به یک رابط کاربری یکپارچه منتقل کرده است. Font Library با پشتیبانی از فونت‌های محلی و وب، امکان بارگذاری فایل‌های WOFF2 و TTF را فراهم می‌کند. این سیستم با Global Styles ادغام شده و متغیرهای CSS را به صورت خودکار تولید می‌نماید. در این راهنما، معماری، کاربردها و نکات پیشرفته Font Library بررسی می‌شود.

Font Library در وردپرس یک ابزار نسبتاً جدید است که مدیریت فونت در FSE را متحول کرده است. در تجربه کاری با قالب‌های بلاکی، یکی از چالش‌های همیشگی، افزودن یک فونت سفارشی بدون دستکاری فایل‌های قالب بود. Font Library این چرخه را به چند کلیک درون ویرایشگر کاهش داده است. برای آشنایی با مبانی وردپرس، مقاله وردپرس چیست و چگونه شروع به کار با آن کنیم؟ را ببینید.

Font Library چیست و چه مشکلی را حل می‌کند؟

Font Library یک رابط کاربری متمرکز برای مدیریت فونت‌ها در وردپرس است. پیش از معرفی این قابلیت، افزودن یک فونت جدید به سایت نیازمند ویرایش فایل functions.php، نوشتن کد wp_enqueue_style، و تعریف دستی @font-face در CSS بود. این فرآیند نه تنها برای کاربران غیرفنی دشوار بود، بلکه برای توسعه‌دهندگان نیز زمان‌بر و مستعد خطا محسوب می‌شد.

Font Library این پیچیدگی‌ها را پنهان کرده و یک رابط بصری در ویرایشگر سایت فراهم می‌آورد. کاربر می‌تواند فونت‌های نصب‌شده را ببیند، فونت جدید آپلود کند، یا از فونت‌های موجود در Google Fonts استفاده نماید. تمام این عملیات بدون نوشتن یک خط کد انجام می‌شود.

مشکل اصلی که Font Library حل می‌کند، پراکندگی مدیریت فونت است. در روش سنتی، فونت‌ها در چند مکان مختلف تعریف می‌شدند: فایل CSS قالب، فایل functions.php، تنظیمات افزونه‌های صفحه‌ساز، و گاهی در CSS سفارشی کاربر. این پراکندگی باعث تضاد، دشواری نگهداری، و ناسازگاری می‌شد. Font Library یک منبع واحد حقیقت برای فونت‌ها ایجاد کرده است.

از منظر معماری، Font Library یک لایه انتزاعی روی سیستم @font-face مرورگر است. این سیستم فایل‌های فونت را در پوشه wp-content/fonts ذخیره می‌کند و تعریف‌های @font-face را به صورت خودکار در فرانت‌اند تزریق می‌نماید. این رویکرد مشابه کاری است که Global Styles برای رنگ‌ها و فاصله‌ها انجام می‌دهد. برای مطالعه درباره Global Styles، مقاله Global Styles در وردپرس چطور مدیریت استایل را متحول کرد؟ را ببینید.

Font Library یک ابزار نیست؛ یک تغییر پارادایم است. پارادایمی که در آن فونت مانند رنگ و فاصله، یک دارایی سراسری سایت محسوب می‌شود، نه یک تنظیم پراکنده.

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

برای درک اهمیت Font Library، باید به چالش‌های مدیریت فونت در Full Site Editing (FSE) نگاه کرد. FSE یک معماری جدید است که در آن ساختار سایت در قالب‌های بلاکی و theme.json تعریف می‌شود. این معماری مزایای زیادی دارد، اما مدیریت فونت در آن با پیچیدگی‌های خاصی همراه بود.

۱. تعدد منابع تعریف فونت

در FSE، فونت‌ها می‌توانستند از چند منبع تعریف شوند: theme.json، فایل CSS قالب، استایل‌های Global Styles، و CSS سفارشی کاربر. این تعدد منابع باعث می‌شد که تشخیص منبع نهایی فونت دشوار باشد. یک توسعه‌دهنده ممکن بود فونتی را در theme.json تعریف کند، اما یک افزونه آن را بازنویسی نماید.

۲. عدم وجود رابط کاربری

پیش از Font Library، تنها راه افزودن فونت سفارشی، ویرایش مستقیم فایل‌های قالب یا استفاده از افزونه‌های شخص ثالث بود. این رویکرد نه تنها برای کاربران غیرفنی غیرقابل دسترس بود، بلکه برای توسعه‌دهندگانی که روی چند پروژه کار می‌کردند نیز زمان‌بر بود.

۳. ناسازگاری با Global Styles

Global Styles از متغیرهای CSS برای اعمال رنگ‌ها، فاصله‌ها و تایپوگرافی استفاده می‌کند. پیش از Font Library، فونت‌های سفارشی به صورت خودکار به این سیستم متغیرها متصل نمی‌شدند. این بدان معنا بود که تغییر یک فونت در theme.json ممکن بود به‌طور کامل در سایت اعمال نشود.

۴. دشواری در بارگذاری بهینه

بارگذاری فونت‌ها نیازمند تنظیمات دقیق font-display، preload و unicode-range است. در روش سنتی، این تنظیمات باید دستی اعمال می‌شدند و اشتباه در آن‌ها می‌توانست به مشکلات عملکردی مانند FOIT (Flash of Invisible Text) یا FOUT (Flash of Unstyled Text) منجر شود.

این چالش‌ها باعث می‌شدند که مدیریت فونت در FSE به یک کار تخصصی تبدیل شود که نیازمند دانش عمیق از CSS، PHP و معماری وردپرس بود. Font Library این موانع را برطرف کرده است. برای مطالعه بیشتر درباره FSE، مقاله چرا Full Site Editing در وردپرس آن‌قدر که فکر می‌کنید ساده نیست؟ را ببینید.

معماری فنی Font Library

Font Library از چند لایه فنی تشکیل شده که هر یک نقش مشخصی در مدیریت فونت‌ها ایفا می‌کند. درک این معماری برای استفاده حرفه‌ای از سیستم ضروری است.

لایه اول: ذخیره‌سازی فایل‌های فونت

فایل‌های فونت آپلودشده در پوشه wp-content/fonts ذخیره می‌شوند. این پوشه به‌طور خودکار توسط وردپرس ایجاد می‌شود و ساختاری مشابه پوشه uploads دارد. هر فونت در یک زیرپوشه با نام مجموعه فونت قرار می‌گیرد. این ساختار از تداخل بین فونت‌های مختلف جلوگیری می‌کند.

لایه دوم: ثبت در theme.json

هنگام آپلود یک فونت از طریق Font Library، وردپرس به‌طور خودکار یک تعریف در theme.json اضافه می‌کند. این تعریف شامل نام فونت، منبع فایل‌ها، و تنظیمات fontDisplay است. اگر theme.json قابل نوشتن نباشد، تعریف در دیتابیس ذخیره می‌شود.

لایه سوم: تولید متغیرهای CSS

وردپرس از تعریف‌های theme.json متغیرهای CSS تولید می‌کند. برای هر فونت، متغیری مانند --wp--preset--font-family--my-font ایجاد می‌شود. این متغیر در سراسر سایت قابل استفاده است و توسط Global Styles به بلاک‌ها اعمال می‌گردد.

لایه چهارم: تزریق @font-face

وردپرس در فرانت‌اند، تعریف‌های @font-face را به صورت خودکار در تگ <style> تزریق می‌کند. این تعریف‌ها شامل مسیر فایل‌های فونت، فرمت، و تنظیمات font-display هستند. تزریق در هوک wp_head انجام می‌شود تا فونت‌ها در اولین فرصت بارگذاری شوند.

لایه پنجم: رابط کاربری ویرایشگر

رابط کاربری Font Library در ویرایشگر سایت قرار دارد. از مسیر «نمایش > ویرایشگر > استایل‌ها > تایپوگرافی»، کاربر می‌تواند فونت‌های موجود را مدیریت کند. این رابط شامل بخش‌های «کتابخانه فونت»، «نصب فونت جدید» و «تنظیمات فونت» است.

جدول ۱: اجزای معماری Font Library
لایه مسئولیت محل ذخیره‌سازی
ذخیره‌سازی فایل نگهداری فایل‌های WOFF2، TTF و OTF wp-content/fonts
ثبت در theme.json تعریف متادیتای فونت theme.json یا دیتابیس
تولید متغیر CSS ایجاد متغیرهای قابل استفاده در سراسر سایت CSS تولیدشده در حافظه
تزریق @font-face بارگذاری فونت در فرانت‌اند تگ <style> در wp_head
رابط کاربری مدیریت بصری فونت‌ها ویرایشگر سایت

تفاوت Font Library با روش‌های سنتی

برای درک ارزش Font Library، مقایسه آن با روش‌های سنتی مدیریت فونت مفید است. در روش سنتی، سه رویکرد اصلی وجود داشت:

رویکرد اول: ویرایش functions.php

در این روش، توسعه‌دهنده کد wp_enqueue_style را به فایل functions.php اضافه می‌کرد و فایل CSS فونت را در پوشه قالب قرار می‌داد. این رویکرد نیازمند دانش PHP و دسترسی به فایل‌سیستم بود. همچنین با به‌روزرسانی قالب، تغییرات از بین می‌رفت.

رویکرد دوم: استفاده از افزونه‌های شخص ثالث

افزونه‌های متعددی برای مدیریت فونت وجود داشتند، اما هر یک رویکرد خود را داشتند. برخی فونت‌ها را در دیتابیس ذخیره می‌کردند، برخی در فایل‌سیستم، و برخی از سرویس‌های خارجی استفاده می‌کردند. این تعدد باعث ناسازگاری و دشواری مهاجرت می‌شد.

رویکرد سوم: CSS سفارشی

برخی کاربران تعریف @font-face را مستقیماً در CSS سفارشی اضافه می‌کردند. این رویکرد ساده به نظر می‌رسید اما مشکلاتی مانند عدم بهینه‌سازی بارگذاری، عدم پشتیبانی از Global Styles، و دشواری در مدیریت چند فونت را به همراه داشت.

Font Library این سه رویکرد را با یک سیستم یکپارچه جایگزین کرده است. جدول زیر مقایسه جامعی ارائه می‌دهد.

جدول ۲: مقایسه Font Library با روش‌های سنتی
معیار ویرایش functions.php افزونه شخص ثالث Font Library
نیاز به کدنویسی بله خیر خیر
ادغام با Global Styles خیر محدود کامل
ذخیره‌سازی استاندارد فایل‌سیستم متغیر دیتابیس + فایل‌سیستم
پشتیبانی از متغیر CSS دستی محدود خودکار
به‌روزرسانی قالب از بین می‌رود حفظ می‌شود حفظ می‌شود
رابط کاربری ندارد دارد دارد (یکپارچه)

نحوه استفاده از Font Library در ویرایشگر

استفاده از Font Library ساده است اما چند روش متفاوت برای دسترسی وجود دارد که هر یک برای سناریوی خاصی مناسب است.

دسترسی از ویرایشگر سایت

مسیر اصلی دسترسی به Font Library از طریق ویرایشگر سایت است. مراحل به شرح زیر است:

  • از پیشخوان وردپرس، به «نمایش > ویرایشگر» بروید.
  • روی آیکون «استایل‌ها» (نیم‌دایره سیاه و سفید) کلیک کنید.
  • در پنل بازشده، بخش «تایپوگرافی» را انتخاب نمایید.
  • روی دکمه «مدیریت فونت‌ها» کلیک کنید.

در این بخش، کتابخانه فونت‌های نصب‌شده نمایش داده می‌شود. هر فونت با نام، پیش‌نمایش و منبع آن مشخص شده است.

افزودن فونت جدید

برای افزودن فونت جدید، دو گزینه وجود دارد:

  • آپلود فونت: فایل‌های WOFF2، TTF یا OTF را از سیستم خود آپلود کنید.
  • نصب از Google Fonts: فونت مورد نظر را از لیست Google Fonts انتخاب کنید.

پس از آپلود، وردپرس به‌طور خودکار فایل‌ها را در پوشه wp-content/fonts ذخیره کرده و تعریف‌های لازم را در theme.json اضافه می‌کند.

مدیریت فونت‌های نصب‌شده

در بخش کتابخانه فونت، می‌توانید فونت‌های نصب‌شده را حذف کنید، پیش‌نمایش بگیرید، یا تنظیمات font-display آن‌ها را تغییر دهید. این تنظیمات شامل auto، block، swap، fallback و optional است.

استفاده از Command Palette

در نسخه‌های اخیر وردپرس، می‌توان از Command Palette برای دسترسی سریع به Font Library استفاده کرد. با فشردن Ctrl+K (ویندوز) یا ⌘+K (مک)، عبارت «font» را تایپ کنید و گزینه «Manage fonts» را انتخاب نمایید. برای مطالعه درباره این ابزار، مقاله WordPress Command Palette چطور سرعت کار با وردپرس را چند برابر می‌کند؟ را ببینید.

مدیریت فونت‌های محلی و وب

Font Library از دو نوع فونت پشتیبانی می‌کند: فونت‌های محلی (Local Fonts) و فونت‌های وب (Web Fonts). درک تفاوت این دو برای انتخاب درست ضروری است.

فونت‌های محلی

فونت‌های محلی فایل‌هایی هستند که روی سرور شما میزبانی می‌شوند. این رویکرد مزایای قابل توجهی دارد:

  • حریم خصوصی: هیچ درخواستی به سرورهای خارجی ارسال نمی‌شود.
  • عملکرد: فونت‌ها از همان دامنه بارگذاری می‌شوند و تأخیر شبکه کاهش می‌یابد.
  • کنترل: نسخه فونت ثابت است و به‌روزرسانی ناخواسته رخ نمی‌دهد.
  • انطباق با GDPR: برای سایت‌های اروپایی که نگران انتقال داده به سرورهای خارجی هستند، حیاتی است.

Font Library امکان آپلود فایل‌های WOFF2، TTF و OTF را فراهم می‌کند. فرمت WOFF2 به دلیل فشرده‌سازی بهتر، برای وب توصیه می‌شود. برای مطالعه درباره انتخاب فونت مناسب، مقاله چگونه فونت مناسب برای سایت انتخاب کنیم؟ راهنمای عملی تایپوگرافی وب را ببینید.

فونت‌های وب (Google Fonts)

Font Library امکان نصب مستقیم فونت‌ها از Google Fonts را نیز فراهم می‌کند. این رویکرد ساده‌تر است اما ملاحظات خاص خود را دارد. فونت‌های Google Fonts از سرورهای گوگل بارگذاری می‌شوند که می‌تواند حریم خصوصی کاربران را تحت تأثیر قرار دهد. همچنین در برخی مناطق جغرافیایی، دسترسی به این سرورها ممکن است کند یا مسدود باشد.

توصیه می‌شود برای پروژه‌های حرفه‌ای، فونت‌های Google Fonts را دانلود کرده و به صورت محلی میزبانی کنید. Font Library این کار را با یک کلیک ممکن کرده است. برای مطالعه درباره تایپوگرافی فارسی، مقاله تایپوگرافی فارسی در طراحی وب چه نکات کلیدی دارد؟ را ببینید.

فونت محلی نه فقط یک انتخاب فنی، بلکه یک تصمیم معماری است که بر حریم خصوصی، عملکرد و انطباق قانونی تأثیر می‌گذارد.

پیاده‌سازی در theme.json

Font Library بر پایه theme.json کار می‌کند. این فایل منبع واحد حقیقت برای تعریف فونت‌هاست. در ادامه، نمونه‌ای از تعریف فونت در theme.json ارائه می‌شود.

تعریف فونت سفارشی

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "My Custom Font, sans-serif",
          "slug": "my-custom-font",
          "name": "My Custom Font",
          "fontFace": [
            {
              "fontFamily": "My Custom Font",
              "fontWeight": "400",
              "fontStyle": "normal",
              "fontDisplay": "swap",
              "src": [
                "file:./assets/fonts/my-custom-font-regular.woff2"
              ]
            },
            {
              "fontFamily": "My Custom Font",
              "fontWeight": "700",
              "fontStyle": "normal",
              "fontDisplay": "swap",
              "src": [
                "file:./assets/fonts/my-custom-font-bold.woff2"
              ]
            }
          ]
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--my-custom-font)"
    }
  }
}

در این پیکربندی، فونت سفارشی با دو وزن (400 و 700) تعریف شده است. کلید fontDisplay روی swap تنظیم شده که باعث می‌شود متن ابتدا با فونت پیش‌فرض نمایش داده شود و پس از بارگذاری فونت سفارشی، جایگزین گردد.

تولید خودکار توسط Font Library

هنگام آپلود فونت از طریق Font Library، وردپرس به‌طور خودکار تعریف مشابهی را در theme.json اضافه می‌کند. اگر theme.json قابل نوشتن نباشد، تعریف در دیتابیس ذخیره می‌شود. این رویکرد تضمین می‌کند که فونت‌ها در هر محیطی قابل استفاده باشند.

استفاده از متغیر در CSS

پس از تعریف فونت، می‌توانید از متغیر CSS آن در استایل‌های سفارشی استفاده کنید:

.my-element {
  font-family: var(--wp--preset--font-family--my-custom-font);
  font-weight: 700;
}

این رویکرد انسجام طراحی را تضمین می‌کند و تغییر فونت در آینده را به یک عملیات متمرکز تبدیل می‌نماید. برای مطالعه درباره متغیرهای CSS، مقاله متغیرهای CSS: چرا هنوز از آن‌ها استفاده نمی‌کنید؟ را ببینید.

محدودیت‌ها و چالش‌ها

Font Library با وجود مزایای فراوان، محدودیت‌هایی دارد که باید از آن‌ها آگاه بود.

۱. وابستگی به قالب‌های بلاکی

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

۲. عدم پشتیبانی از همه فرمت‌ها

Font Library از فرمت‌های WOFF2، TTF و OTF پشتیبانی می‌کند. فرمت‌های قدیمی‌تر مانند EOT و SVG پشتیبانی نمی‌شوند. این محدودیت در پروژه‌هایی که نیاز به پشتیبانی از مرورگرهای قدیمی دارند، می‌تواند مسئله‌ساز باشد.

۳. محدودیت در فونت‌های متغیر (Variable Fonts)

فونت‌های متغیر که امکان تغییر وزن و عرض در یک فایل واحد را فراهم می‌کنند، در Font Library پشتیبانی محدودی دارند. اگرچه می‌توان فایل را آپلود کرد، اما تنظیم محورهای متغیر نیازمند کدنویسی دستی است.

۴. عدم کنترل بر preload

Font Library به‌طور خودکار فونت‌ها را preload نمی‌کند. برای بهینه‌سازی عملکرد، باید به صورت دستی تگ <link rel="preload"> را به هدر اضافه کنید. این کار نیازمند ویرایش فایل functions.php یا استفاده از افزونه است. برای مطالعه درباره بهینه‌سازی، مقاله چگونه سرعت سایت وردپرسی را افزایش دهیم؟ را ببینید.

۵. عدم پشتیبانی از font-display در همه حالت‌ها

تنظیم font-display در Font Library از گزینه‌های محدودی پشتیبانی می‌کند. برای کنترل دقیق‌تر، باید تعریف @font-face را دستی ویرایش کنید.

بهترین شیوه‌ها

برای استفاده حرفه‌ای از Font Library، رعایت چند اصل توصیه می‌شود.

۱. استفاده از فرمت WOFF2

فرمت WOFF2 بهترین فشرده‌سازی را ارائه می‌دهد و توسط همه مرورگرهای مدرن پشتیبانی می‌شود. استفاده از این فرمت حجم فایل را تا ۳۰٪ نسبت به WOFF کاهش می‌دهد.

۲. میزبانی محلی فونت‌ها

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

۳. محدود کردن تعداد فونت‌ها

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

۴. استفاده از font-display مناسب

مقدار swap برای فونت‌های اصلی و optional برای فونت‌های تزئینی مناسب است. این تنظیمات از FOIT جلوگیری کرده و تجربه کاربری را بهبود می‌بخشد.

۵. تست در محیط staging

قبل از اعمال تغییرات فونت در سایت تولیدی، آن‌ها را در محیط staging تست کنید. برای مطالعه درباره wp-env، مقاله @wordpress/env چیست و چرا محیط توسعه لوکال وردپرس را متحول کرد؟ را ببینید.

۶. مستندسازی فونت‌ها

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

مدیریت فونت مانند مدیریت رنگ است: هرچه متمرکزتر، منسجم‌تر و قابل نگهداری‌تر.

پرسش‌های پرتکرار درباره Font Library

Font Library در وردپرس چیست و چه کاربردی دارد؟

Font Library یک سیستم مدیریت متمرکز فونت در وردپرس است که به کاربران اجازه می‌دهد بدون کدنویسی، فونت‌های سفارشی را آپلود، حذف و مدیریت کنند. این سیستم با theme.json و Global Styles ادغام شده و متغیرهای CSS را به صورت خودکار تولید می‌نماید.

چگونه از Font Library استفاده کنم؟

از مسیر «نمایش > ویرایشگر > استایل‌ها > تایپوگرافی» می‌توانید به Font Library دسترسی داشته باشید. در این بخش، می‌توانید فونت جدید آپلود کنید یا از Google Fonts نصب نمایید.

آیا Font Library از فونت‌های فارسی پشتیبانی می‌کند؟

بله، Font Library از هر فونتی که در قالب WOFF2، TTF یا OTF باشد پشتیبانی می‌کند. برای فونت‌های فارسی، توصیه می‌شود از فرمت WOFF2 استفاده کنید. برای مطالعه درباره فونت‌های فارسی، مقاله بهترین فونت‌های فارسی برای وب کدامند؟ را ببینید.

تفاوت Font Library با افزونه‌های مدیریت فونت چیست؟

Font Library یک قابلیت هسته‌ای وردپرس است که با theme.json و Global Styles ادغام شده است. افزونه‌های شخص ثالث ممکن است رویکرد متفاوتی داشته باشند و با سیستم متغیرهای CSS سازگار نباشند.

آیا Font Library بر سرعت سایت تأثیر دارد؟

تأثیر آن بستگی به نحوه استفاده دارد. با استفاده از فرمت WOFF2، میزبانی محلی و تنظیم font-display مناسب، می‌توان تأثیر منفی را به حداقل رساند. اما آپلود فونت‌های زیاد می‌تواند سرعت را کاهش دهد.

چگونه فونت‌های Google Fonts را به صورت محلی میزبانی کنم؟

در Font Library، گزینه «Install from Google Fonts» را انتخاب کنید. وردپرس به‌طور خودکار فایل‌ها را دانلود کرده و در پوشه wp-content/fonts ذخیره می‌کند.

آیا می‌توانم فونت‌های نصب‌شده را حذف کنم؟

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

نگاهی به لایه‌های زیرین

از منظر مهندسی نرم‌افزار، Font Library یک پیاده‌سازی از مفهوم Design Token است. در سیستم‌های طراحی مدرن، توکن‌ها واحدهای پایه‌ای هستند که تصمیمات طراحی را کپسوله می‌کنند. Font Library این مفهوم را به وردپرس آورده و فونت‌ها را به توکن‌های قابل استفاده در سراسر سایت تبدیل کرده است.

در سطح پیاده‌سازی، وردپرس از کلاس WP_Font_Library برای مدیریت فونت‌ها استفاده می‌کند. این کلاس مسئولیت ثبت، ذخیره‌سازی و بازیابی فونت‌ها را بر عهده دارد. هر فونت در یک آرایه داخلی با کلید اسلاگ نگهداری می‌شود.

یکی از جنبه‌های پیشرفته، نحوه تعامل Font Library با سیستم WP_Theme_JSON است. هنگامی که فونتی آپلود می‌شود، وردپرس یک آبجکت WP_Theme_JSON جدید ایجاد کرده و تعریف فونت را به آن اضافه می‌کند. سپس این آبجکت با theme.json موجود ادغام می‌شود. فرآیند ادغام بازگشتی است و مقادیر لایه بالاتر، مقادیر لایه پایین‌تر را بازنویسی می‌کنند.

در سطح عمیق‌تر، Font Library از یک سیستم Cache استفاده می‌کند. تعریف‌های @font-face تولیدشده در حافظه موقت (Transient) ذخیره می‌شوند تا از تولید مکرر آن‌ها جلوگیری شود. این رویکرد عملکرد را در سایت‌های پربازدید بهبود می‌بخشد.

برای مهندسان ارشد، درک تعامل Font Library با Block Bindings API اهمیت دارد. فونت‌ها می‌توانند به عنوان اتریبیوت در بلاک‌ها تعریف شوند و از طریق Block Bindings به داده‌های خارجی متصل گردند. برای مطالعه درباره این API، مقاله Block Bindings API در وردپرس چیست و چطور داده‌ها را به بلاک متصل می‌کند؟ را ببینید.

در سطح معماری کلان، Font Library بخشی از یک روند گسترده‌تر در اکوسیستم وردپرس است: حرکت از مدیریت پراکنده به سمت مدیریت متمرکز. این روند در Global Styles، Pattern Directory و Block Directory نیز قابل مشاهده است. برای مطالعه درباره Block Variations، مقاله Block Variations در وردپرس چطور بلاک‌ها را بدون کدنویسی تغییر می‌دهد؟ را ببینید.

در آینده، انتظار می‌رود که Font Library با قابلیت‌هایی مانند پشتیبانی کامل از فونت‌های متغیر، preload خودکار، و ادغام با سیستم‌های طراحی خارجی گسترش یابد. همچنین، احتمال دارد که Font Library به یک API عمومی تبدیل شود که توسعه‌دهندگان بتوانند فونت‌ها را از منابع خارجی ثبت کنند. برای مطالعه درباره ساخت بلاک سفارشی، مقاله آیا create-block بهترین راه ساخت بلاک سفارشی در وردپرس است؟ را ببینید.

آنچه در عمل اهمیت دارد

Font Library یک تغییر پارادایمی در نحوه مدیریت فونت در وردپرس است. این سیستم با حذف پیچیدگی‌های کدنویسی، فرآیند افزودن فونت را از یک کار تخصصی به یک عملیات ساده تبدیل کرده است. از منظر معماری، Font Library یک لایه انتزاعی تمیز روی سیستم @font-face و theme.json ایجاد می‌کند و فونت‌ها را به دارایی‌های سراسری سایت تبدیل می‌نماید.

برای کاربران، تسلط بر Font Library به معنای کنترل کامل بر تایپوگرافی سایت بدون نیاز به توسعه‌دهنده است. برای توسعه‌دهندگان، درک این سیستم امکان ساخت قالب‌های بلاکی منعطف‌تر و قابل نگهداری‌تر را فراهم می‌کند. با گسترش قابلیت‌های FSE و معرفی APIهای جدید، Font Library احتمالاً به یک بخش جدانشدنی از تجربه وردپرس تبدیل خواهد شد. برای مطالعه درباره روندهای تایپوگرافی، مقاله کدام ترندهای Typography در طراحی وب ماندگارند؟ را ببینید. 🚀

اگر از Font Library در پروژه‌ای استفاده کرده‌اید، برای ما جالب است بدانید کدام جنبه آن بیشترین ارزش را برایتان ایجاد کرده است. تجربه خودتان را در دیدگاه‌ها بنویسید؛ به‌خصوص اگر روش خلاقانه‌ای برای بهینه‌سازی بارگذاری فونت یا ترکیب آن با سایر APIهای وردپرس کشف کرده‌اید که می‌تواند برای خواننده بعدی مفید باشد.