نحوه افزودن فونت های سفارشی در وردپرس

آیا می خواهید با نحوه افزودن فونت های سفارشی در وردپرس و روش های پیاده سازی آن آشنا شوید؟ فونت های سفارشی به شما امکان می دهد از ترکیب زیبایی از فونت های مختلف در وب سایت خود برای بهبود تایپوگرافی و تجربه کاربری استفاده کنید.

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

در این پست، ما به شما ۳روش کاربردی برای افزودن فونت های سفارشی در وردپرس را با استفاده از Google Fonts ، TypeKit و CSS3 @ Font-Face نشان خواهیم داد.

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

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

نحوه پیدا کردن قلم های سفارشی برای استفاده در وردپرس

مکان های زیادی برای یافتن فونت های وب رایگان مانند Google Fonts، Typekit، FontSquirrel و fonts.com وجود دارد.

اگر نمی دانید چگونه قلم ها را با هم ترکیب و مطابقت دهید ، Font Pair را امتحان کنید. این به طراحان کمک می کند تا فونت های زیبا گوگل را با هم جفت و جور کنند.

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

۱- افزودن قلم های سفارشی در وردپرس از Google Fonts

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

روش ۱: افزودن قلم های سفارشی با استفاده از پلاگین Easy Google Fonts

اگر می خواهید Google Fonts را در وب سایت خود اضافه کنید و از آن استفاده کنید ، پس این روش ساده ترین و توصیه شده برای مبتدیان است.

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه Easy Google Fonts است.

پس از فعال شدن، می توانید به صفحه Appearance »Customizer  (نمایش -> سفارشی سازی ) بروید. با این کار رابط کاربری تنظیم کننده تم مستقیم در جایی باز خواهید شد که قسمت جدید تایپوگرافی را مشاهده خواهید کرد.

با کلیک بر روی تایپوگرافی ، بخشهای مختلف وب سایت خود را نشان می دهید که در آن می توانید Google Fonts را اعمال کنید. به سادگی بر روی "ویرایش فونت (Edit Font)" در زیر بخشی که می خواهید ویرایش کنید، کلیک کنید.

در بخش font family، می توانید هر قلم Google را که می خواهید در وب سایت خود استفاده کنید ، انتخاب کنید. همچنین می توانید سبک قلم ، اندازه قلم ، پدینگ ، حاشیه و موارد دیگر را انتخاب کنید.

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

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

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

در مرحله بعدی ، بر روی دکمه "ایجاد کنترل قلم (Create font control)" کلیک کنید و سپس از شما خواسته می شود انتخاب کنندگان CSS را وارد کنید.

می توانید عناصر HTML را که می خواهید هدف قرار دهید (به عنوان مثال ، h1 ، h2 ، p ، blockquote) اضافه کنید یا از کلاس های CSS استفاده کنید.

می توانید از ابزار Inspect در مرورگر خود استفاده کنید تا بفهمید کدام کلاس های CSS توسط منطقه خاصی که می خواهید تغییر دهید استفاده می شود.

انتخابگرهای CSS را اضافه کنید

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

برای استفاده از این کنترل کننده های قلم ، باید به قسمت Appearance »Customizer بروید و روی برگه تایپوگرافی کلیک کنید.

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

فراموش نکنید که برای ذخیره تغییرات روی دکمه ذخیره یا انتشار کلیک کنید.
روش ۲: به صورت دستی Google Fonts را در وردپرس اضافه کنید

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

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

در مرحله بعدی ، برای کپی کردن کد جاسازی باید به برگه "Embed" در سایدبار بروید.

به دو روش می توانید این کد را به سایت وردپرس خود اضافه کنید.

ابتدا می توانید فایل header.php قالب خود را ویرایش کرده و کد را قبل از برچسب <body> پیست کنید.

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

به سادگی افزونه Insert Headers and Footers را نصب و فعال کنید.

پس از فعال شدن ، به تنظیمات »درج عنوان ها و صفحه پاورقی ها (Insert Headers and Footers page ) بروید و کد جاسازی شده را در کادر" اسکریپت ها در هدر (Scripts in header) "جایگذاری کنید.

فراموش نکنید که برای ذخیره تغییرات خود بر روی دکمه ذخیره کلیک کنید. اکنون این افزونه بارگیری کد جاسازی Google Font را در تمام صفحات وب سایت شما شروع می کند.

می توانید از این قلم در صفحه استایل قالب خود مانند این استفاده کنید:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

2- افزودن قلم های سفارشی در وردپرس با استفاده از Typekit

Typekit توسط Adobe Fonts یکی دیگر از منابع رایگان و برتر برای قلم های عالی است که می توانید در پروژه های طراحی خود استفاده کنید. آنها اشتراک پولی و همچنین یک برنامه رایگان محدود دارند که می توانید استفاده کنید.

به سادگی برای یک حساب Adobe Fonts ثبت نام کنید و از بخش مرور قلم ها بازدید کنید. برای انتخاب قلم و ایجاد یک پروژه ، از اینجا باید روی دکمه </> کلیک کنید.

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

شما باید این کد را در قسمت <head> وب سایت خود کپی و جایگذاری کنید.

به دو روش می توانید این کد را به سایت وردپرس خود اضافه کنید.

ابتدا می توانید فایل header.php طرح زمینه خود را ویرایش کرده و کد را قبل از برچسب <body> پیست کنید.

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

به سادگی افزونه Insert Headers and Footers را نصب و فعال کنید.

پس از فعال شدن، به تنظیمات »درج عنوان ها و صفحه پاورقی ها (Insert Headers and Footers page ) بروید و کد جاسازی شده را در کادر" Scripts in header"جایگذاری کنید.

اکنون می توانید از قلم Typekit که در صفحه استایل قالب وردپرس خود انتخاب کرده اید، مانند این استفاده کنید:

h1 .site-title { 
font-family: gilbert, sans-serif;
}

3- افزودن قلم های سفارشی در وردپرس با استفاده از CSS3 @ font-face

مستقیم ترین روش افزودن فونت های سفارشی در وردپرس افزودن قلم ها با استفاده از روش CSS3 @ font-face است. این روش به شما امکان می دهد از هر فونتی که دوست دارید در وب سایت خود استفاده کنید.

اولین کاری که باید انجام دهید این است که فونت مورد نظر خود را در قالب وب بارگیری کنید. اگر فرمت وب را برای قلم خود ندارید ، می توانید آن را با استفاده از مولد FontSquirrel Webfont تبدیل کنید.

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

بهترین مکان برای بارگذاری قلم ها ، داخل پوشه جدید "قلم ها" در دایرکتوری قالب یا چایلد تم شما است.

برای بارگذاری فونت می توانید از FTP یا File Manager cPanel خود استفاده کنید.

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

@font-face {
    font-family: Arvo;  
    src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
    font-weight: normal;  
}

فراموش نکنید که font-family و URL  را با اطلاعات جدید جایگزین کنید.

بعد از آن می توانید از آن فونت در هر جایی از صفحه استایل قالب خود مانند این استفاده کنید:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

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

این همه ، امیدواریم این مقاله به شما کمک کند فونت های سفارشی را در وردپرس اضافه کنید.

نحوه افزودن فونت های سفارشی در وردپرس

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