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

1. دستورات مورد نیاز در فایل functions.php در هاست

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

public_html/wp-includes/functions.php

کدهای زیر را به آخر این فایل اضافه کنید و سپس دکمه ذخیره را بزنید.

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff'] = 'application/x-font-woff';
    $mimes['woff2'] = 'application/x-font-woff2';
    $mimes['ttf'] = 'application/x-font-ttf';
    $mimes['svg'] = 'image/svg+xml';
    $mimes['eot'] = 'application/vnd.ms-fontobject';
    return $mimes;
} );

به داشبورد وردپرس مراجعه کنید و در بخش مدیا فونت های خود را بارگذاری کنید

نکته: در این مرحله اگر با خطای مجاز نبودن آپلود فایل و یا همان امنیت وردپرس برخوردید، کد دستوری زیر را به فایل functions.php اضافه کنید:

define('ALLOW_UNFILTERED_UPLOADS', true);

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

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
      $fonts[] = 'your-font-name';
      return $fonts;
} );

نکته: به جای your-font-name نام فونت خود را قرار دهید.

2. آپلود کردن فونت ها

برای اپلود کردن فونت ها کافی است به کنترل پنل وردپرس مراجعه کرده و در بخش مدیا دکمه Add new و سپس دکمه Upload file را بزنید
سپس فونت دلخواه خود را اپلود کنید. و با کلیک کردن روی یکی از فونت ها از مسیری که آن فایل آپلود شده یک کپی بگیرید.

نام فایل را مانند فرمت زیر از انتهای آدرس بردارید و از آن کپی بگیرید

https://your-address-url/wp-content/uploads/2020/12/

2. دستورات مورد نیاز CSS در بخش Adiitional CSS در بخش سفارشی سازی قالب

به بخش Appearance بروید و گزینه Customize را انتخاب کنید.

در این قسمت به بخش Additional CSS بروید و کد های زیر را در آن وارد کنید:

@font-face {
  font-family: 'your-font-name';
  font-style: normal;
  font-weight: 400;
  src: url('your-address-url/your-font-name.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('your-address-url/your-font-name.eot?#iefix') format('embedded-opentype'),
       /* IE6-IE8 */
    url('your-address-url/your-font-name.woff2') format('woff2'),
       /* Super Modern Browsers */
    url('your-address-url/your-font-name.woff') format('woff'),
       /* Modern Browsers */
    url('your-address-url/your-font-name.ttf') format('truetype'),
       /* Safari, Android, iOS */
    url('your-address-url/your-font-name.svg#AdventPro') format('svg');
       /* Legacy iOS */
}

• به جای your-address-url آدرسی را که در هنگام آپلود فونت کپی گرفتید ، paste کنید
• و به جای your-font-name نام فونتی را که در آخرین بخش فایل functions.php تایپ کردید را وارد نمایید

در نهایت به داشبرد وردپرس مراجعه کنید. سپس به بخش Appearance و زیر منوی Customize رفته و در ادامه به بخش Typography بروید و به تنظیمات فونت دلخواه خود بپردازید.

نکته: ممکن است قالب انتخابی شما بخش Typography را نداشته باشد.