پرش به محتویات

فونت‌های سفارشی (Custom Fonts)

Typography سایت تأثیر زیادی روی برداشت کاربر دارد و ارزش دارد زمان بگذارید.

Bricks اجازه می‌دهد هر فونتی اضافه کنید — از web-safe و Google fonts تا آپلود فونت سفارشی در پیشخوان وردپرس زیر بریکس (Bricks) > فونت‌های سفارشی (Custom Fonts). در ادامه روی آپلود فونت سفارشی تمرکز می‌کنیم.

نکته

Bricks 2.0 «مدیر فونت (Font Manager)» جدید برای آپلود و مدیریت Custom Fonts مستقیماً از داخل سازنده معرفی کرد. Google Fonts را محلی دانلود کنید و غیره.

ساخت و آپلود فونت سفارشی

برای فونت سفارشی جدید به بریکس (Bricks) > فونت‌های سفارشی (Custom Fonts) در پیشخوان بروید و Add New بزنید.

ابتدا عنوان فونت را بدهید. این عنوان در کنترل dropdown font-family هنگام ویرایش typography در سازنده نمایش داده می‌شود.

اکنون فایل‌های فونت را برای همه variantها (font-weight و font-style) که در سایت استفاده می‌کنید آپلود کنید:

ویرایش variantهای فونت سفارشی

ویرایش فونت سفارشی و مدیریت فایل‌ها و variantها

در مثال بالا فایل .WOFF و .WOFF2 برای font-weight استاندارد (400) و font-style «Normal» آپلود شده.

اگر فایل برای font-weight 700 (bold) و font-style «Italic» دارید، «Add a font variant» بزنید، weight «700» و style «Italic» را انتخاب کنید و فایل‌های درست را آپلود کنید.

پس از ساخت variantها و آپلود فایل‌ها، ذخیره کنید. فونت سفارشی در سازنده در دسترس است.

هنگام ویرایش فونت یا در صفحه «Custom Fonts» preview هم می‌بینید.

نکته

اگر فونت‌های سفارشی درست نمایش داده نمی‌شوند، تنظیمات URL وردپرس را بررسی کنید.

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

فرمت‌های پیش‌فرض:

  • WOFF (Web Open Font Format): فرمت توصیه‌شده مرورگرهای مدرن. داده فشرده و سریع‌تر از TrueType/OpenType. پشتیبانی کامل IE9+.
  • WOFF2 (Web Open Font Format 2.0): TrueType/OpenType با فشرده‌سازی بهتر از WOFF 1.0. بدون پشتیبانی IE.
  • TTF (TrueType Font): داده بدون فشرده‌سازی؛ پشتیبانی جزئی IE9+.

فرمت توصیه‌شده WOFF است با browser support حدود 98.26% و IE9+.

فعال‌سازی فرمت‌های بیشتر

برای IE8 می‌توانید فرمت EOT (یا دیگر فرمت‌ها) را با افزودن کد زیر به child theme Bricks فعال کنید:

add_filter( 'bricks/custom_fonts/mime_types', function( $mime_types ) {
  // Enable EOT font format for <IE9 browser support
  array_unshift( $mime_types, ['eot' => 'font/eot'] );

  return $mime_types;
} );

پس از ساخت حداقل یک فونت سفارشی، بخش «Custom Fonts» با همه فونت‌های شما زیر «Standard Fonts» در هر کنترل «font-family» نمایش داده می‌شود:

کنترل font-family با Custom Fonts

Pro Tip: GDPR-compliant با host کردن Google Fonts

با Google Font روی سایت، قبل از نمایش فونت باید رضایت بازدیدکننده بگیرید.

با دانلود variantهای Google Fonts موردنیاز و آپلود به‌عنوان «Custom fonts» در Bricks از این مسئله اجتناب کنید.

نکته

پروژه «Google Webfonts Helper» منبع خوبی برای دانلود مستقیم .eot، .woff، .woff2، .svg، .ttf فونت Google است.

Bricks 1.4 اجازه «Disable Google Fonts» در تنظیمات Performance می‌دهد:

غیرفعال‌کردن Google Fonts در Performance

بریکس (Bricks) > تنظیمات (Settings) > Performance: Disable Google Fonts

منابع فونت رایگان