آموزش اضافه کردن فونت دلخواه به وردپرس

چگونگی اضافه کردن فونت های سفارشی به قالب وردپرس

برای اضافه کردن فونت به قالب وردپرس در ابتدا باید آن فونت را در ۳ و یا ۴ فرمت داشته باشید. در این مطلب به عنوان نمونه فونت Iran-sans مثال زده می‌شود. فونت‌های شما باید در سه فرمت متفاوت یعنی ttf، eot و woff و در برخی موارد svgz باشد. اما نگران نباشید می‌توانید فونت مورد نظر خود را با همان فرمت رایج یعنی ttf دانلود کرده و با استفاده از سایت های مختلف آن را به فرمت های دیگر تبدیل کنید.

در اضافه کردن فونت برای تبدیل فونت ttf به فرمت eot از آدرس https://everythingfonts.com/ttf-to-eot و برای تبدیل فونت ttf به فرمت woff از آدرس https://everythingfonts.com/ttf-to-woff استفاده کنید.

در صورتی که هنوز اقدام به تهیه هاست وردپرس نکرده اید میتوانید از سرویس هاست وردپرس NVMe هاست 97 استفاده نمایید .

سرویس هاست وردپرس کاملا منطبق بر اسکریپت وردپرس فارسی بوده و از مزیت های دیگر این سرویس امکان نصب گواهی امنیتی SSL بصورت کاملا رایگان حتی برای دامنه های IR قالب نصب است و همچنین از مزیت دیگر سرویس هاست وردپرس NVMe درایو های پر سرعت NVMe و حرفه ای می باشد که سرعت لود سایت را چندین برابر افزایش می دهد که تاثیر مستقیمی روی رتبه الکسا و همچنین ورودی های گوگل دارد.

در صورت خرید سرویس از هاست 97 ، پس از خرید هاست لینوکس بدون نیاز به هیچ گونه دانش طراحی سایت یا کدنویسی ، سایت شما راه اندازی می شود ! برای اولین بار هاست ۹۷ طبق درخواست شما سیستم سایت ساز و فروشگاه ساز وردپرس را برای یکبار به صورت رایگان و طی چند دقیقه برای شما نصب و فعال می کند. شما می توانید با بخش مدیریت فارسی این سایت ساز ها مطالب و محصولات خود را در سایت قرار دهید ، بخش های مختلف سایت را مدیریت کنید و فعالیت آنلاین خود را شروع کنید.

اضافه کردن فونت به قالب وردپرس

در اضافه کردن فونت برای اضافه کردن فونت ابتدا قالب وردپرسی مورد نظر خود را دریافت و نصب نمایید. یک پوشه با نام fonts در داخل پوسته ایجاد کرده و در صورتی که چنین فایلی از قبل وجود داشت این کار را انجام ندهید. سپس فونت مورد نظر خود را با همان فرمت های گفته شده در بالا در این پوشه آپلود کنید. برای مثال Iran-sans.ttf ، Iran-sans.woff ، Iran-sans.eot را در این پوشه آپلود کنید.

در اضافه کردن فونت اکنون نوبت به استایل نویسی برای این فونت ها در فایل style.css پوسته است که ما در پایین این کد را آماده سازی کردیم می توانید استفاده کنید و ان را در داخل فایل استایل پوسته خود قرار دهید.

<pre class="brush: php; title: ; notranslate" title="">@font-face {
 font-family: 'Iran-sans';
 src: url('Iran-sans.eot?#') format('eot'),
 url('Iran-sans.woff') format('woff'),
 url('fonts/Iran-sans.ttf') format('truetype');
}
body{
font-family:Iran-sans;
}</pre>

بعد از قرار دادن کد فوق در فایل نام برده نوبت به تغییر تمامی font-family قالب است که می توانید این کلمه را جستجو و فونت را Iran-sans تغییر دهید.

مثال: اگر font-family یک بخش و تگ المان نوشته شده باشد font-family: Arial یعنی فونت این تگ یا المان Arial می باشد اینجاست که باید تغییر یابد به font-family:Iran-sans

به همین راحتی فونت سایت و قالب خود را تغییر خواهید داد حال با رفتن به صفحه ی سایت و زدن دکمه Ctrl+f۵ تغییرات را مشاهده خواهید کرد.

تغییر فونت قالب حرفه ای وردپرس

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

روش دیگری که در اینجا وجود دارد نوشتن استایل سفارشی تغییر فونت قالب است.اگر دوست دارید فایل style.css را برای تغییر فونت دست کاری نکنید می توانید از روش زیر استفاده کنید.

۱) فونت ها را در سه فرمت یا چهار فرمت در پوشه fonts آپلود کنید.

۲) کد زیر را در فایل style.css قالب خود قرار دهید.

<pre class="brush: php; title: ; notranslate" title="">@font-face {
 font-family: 'Iran-sans';
 src: url('Iran-sans.eot?#') format('eot'),
 url('Iran-sans.woff') format('woff'),
 url('fonts/Iran-sans.ttf') format('truetype');
}
body{
font-family:Iran-sans;
}

در اضافه کردن فونت اکنون نیازی نیست تمامی font-family داخل استایل و یا rtl را سرچ و Iran-sans را جایگزین کنید؛ کافیست کد زیر را کپی و در بخش استایل سفارشی که در پنل تنظیماتی قالب قرار دارد Paste کنید.

<pre class="brush: php; title: ; notranslate" title="">body,div,p,a,h۱,h۲,h۳,h۴,h۵,h۶,span{
font-family:Iran-sans !important;
}

توجه: اگر این بخش یعنی استایل سفارشی در پنل تنظیماتی پوسته شما وجود نداشت می توایند در داخل فایل style.css قرار دهید.