افزودن فونت دلخواه به پوسته وردپرس

تا حالا این سوال براتون پیش اومده که چطور فونت دلخواه خودتون رو به قالب های وردپرسی اضافه کنید؟

دلتون میخواد که توی چند ثانیه، فونت دلخواه خودتون رو به سایتتون اضافه کنید؟

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

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

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

متاسفانه در وب فارسی ما محدود به سه فونت بودیم که بر روی تمامی سیستم ها نصب شده است.

فونت arial, Tahomaو mono-type تنها فونتهایی بودند که می‌توانستیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس است.

همین مسئله؛ باعث به وجود آمدن یک نواختی در وب فارسی شده بود.

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

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

مرورگر ها
نام فونت	نسخه مرورگر	نسخه مرورگر	نسخه مرورگر	نسخه مرورگر	نسخه مرورگر
TTF/OTF	9.0	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	پشتیبانی نمیکند.	36.0	35.0	پشتیبانی نمیکند.	26.0
SVG	پشتیبانی نمیکند.	4.0	پشتیبانی نمیکند.	3.2	9.0
EOT	6.0	پشتیبانی نمیکند.	پشتیبانی نمیکند.	پشتیبانی نمیکند.	پشتیبانی نمیکند.

تا اینجای کار فکر کنم متوجه شدید که هر مرورگر وب چه فونت هایی رو پشتیبانی میکنه و به چه دلیل باید از فرمت های مختلف فونت ها استفاده کنیم؛

با توجه به اینکه فرمت woff در تمامی مرورگر ها پشتیبانی میشه؛ در صورتیکه بخواید حجم کمتری رو برای بارگذاری فونت ها صرف کنید، پیشنهاد میکنم فونت خودتون رو فقط با پسوند woff استفاده کنید.

حالا بریم سراغ سی اس اس و خاصیت های فونت که تو سی اس اس وجود داره.

برخی خاصیت های فونت در css

به کد زیر دقت کنید :

font-family: feria;
font-size: 13px;
color: #000;
letter-spacing: 2px;
text-align: right;
direction: rtl;
text-decoration: none;
text-transform: lowercase;
text-indent: 30px;
text-shadow: #FF6600 8px;
font-style: italic;
font-weight: 300px;


توضیحات مربوط به خواص کد های سی اس اس (CSS) :

• خاصیت font-family : برای مشخص کردن فونت متن هستش که در اینجا برای فونت مثلا feria در نظر گرفته شده ؛
• خاصیت font-size : این خاصیت سایز فونت را مشخص می کنه.
• خاصیت color : این خاصیت رنگ فونت را مشخص می کنه.
• خاصیت letter-spacing : ای خاصیت فاصله ی کاراکترها را مشخص میکنه از سمت چپ.
• خاصیت text-align : این خاصیت متن را ترازبندی میکنه ( راست , چپ , وسط )
• خاصیت direction : این خاصیت هم مثل text-align تراز بندی رو مشخص می کنه که بیشتر در سایت های فارسی زبان استفاده میشه.
• خاصیت text-decoration : اگر توجه کرده باشید لینک ها دارای یک خط در زیرشون هستن با قرار دادن خاصیت text-decoration در حالت none این خط حذف میشه.
• خاصیت text-transform : برای بزرگ و کوچک کردن حروف انگلیسی.
• خاصیت text-indent : تو رفتگی متن را مشخص می کنه.
• خاصیت text-shadow : متن را اگر استفاده بشه سایه دار می کنه.
• خاصیت font-style : استایل نمایش فونت مثلا italic کمی متن رو کج می کنه.
• خاصیت font-weight : عرض کاراکتر رو مشخص می کنه.

دیگه بریم سراغ ادامه کار خودمون ؛
سوال بی جواب ما هنوز هم سر جای خودش باقی مونده ؛

چطوری میتونیم فونت دلخواه به پوسته وردپرس یا دیگر صفحات وب اضافه کنم؟

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

@font-face {
 font-family: 'feria.ir';
 src: url('feria.eot');
 src: url('feria.eot?#iefix') format('embedded-opentype'),
 url('feria.woff') format('woff'),
 url('feria.ttf') format('truetype'),
 url('feria.svg#feria') format('svg');
 font-weight: normal;
 font-style: normal;
 }

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

برای مثال فایل استایل پوسته ما ( همون فایل style.css) در پوشه اصلی قرار داره؛

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

حالا شما میخواهید فونت ها رو در پوشه ای به نام fonts قرار بدین ؛

باید کد فراخوانی و معرفی فونت رو به صورت زیر به استایل پوسته اضافه کنید!

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

نحوه دسترسی به این پوشه باید به صورت

YOUR-STIE/wp-content/themes/YOUR_THEME/fonts

باشه و فرمت های مختلف فونت رو در همون پوشه قرار بدین.

بعد از اون باید کد زیر رو به فایل استایل (Style.css) قالب وردپرس خودتون اضافه کنید.

@font-face {
font-family: 'feria.ir';
src: url('fonts/feria.eot');
src: url('fonts/feria.eot?#iefix') format('embedded-opentype'),
url('fonts/feria.woff') format('woff'),
url('fonts/feria.ttf') format('truetype'),
url('fonts/feria.svg#feria') format('svg');
font-weight: normal;
font-style: normal;
}

اگر فونت دلخواهتون رو با فرمت های مختلف ندارید کافیه تا تو بخش تماس با ما درخواست خودتون رو ارسال کنید تا ما فونت دلخواه شما با فرمت های مختلف ( eot,ttf,woff,woff2,svg ) رو به صورت استاندارد آماده کنیم و برای شما بفرستیم ؛

همچنین میتونید از فونت های وب که آماده کردیم استفاده کنید.

خب من این کار ها رو انجام دادم؛ اما فونت عوض نشده؛ باید چیکار کنم؟

لطفا توجه داشته باشید که اضافه کردن این کد، پایان کار نیست!

شما برای نمایش فونت باید کار های زیر رو هم انجام بدید.

1. پوسته وردپرس دلخواه خودتون رو انتخاب کنید.
حالا باید فایل استایل پوسته رو باز کنید ( معمولا به اسم های style.css و rtl.css هست) در این دو فایل خانواده فونت (font-face) (کدی که بالا گفتیم) رو معرفی کنید و ذخیره کنید.

حالا از یه نرم افزار ویرایشگر متن شبیه notepad++ استفاده کنید؛

باید در فایل style.css و rtl.css تمام فونت ها رو تغییر بدید؛

من دو فایل استایل رو در پوسته 2019 وردپرس Twenty Nineteen در ویرایشگر متنی (Notepad++) باز کردم.

این دو فایل با نام های style.css و style-rtl.css هستن.

حالا باید فونت ها رو پیدا کنم.

برای اینکار کلید Ctrl+f رو بزنید و عبارت font (قسمت شماره یک) رو جستجو کنید (قسمت شماره دو).

دلیل این که گفتیم عبارت font رو جستجو کنید؛

اینه که استفاده از فونت ها در پوسته های مختلف بدون استفاده از font-family هم شکل میگیره که به صورت

font: 13pt Georgia, “Times New Roman”, Times, serif;

هست.

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

شما بعد از جستجو؛ گزینه هایی که پیدا کردید رو بررسی کنید و همه ی گزینه هایی که به شکل نوشتاری بالا (که با رنگ قرمز مشخص شده) هستن و همه ی نوشته هایی که به شکل نوشتاری پایین :

 font-family: Tahoma, Arial, sans-serif;

هستن رو به فونت دلخواه خودتون که اضافه کردید تغییر بدید.

بعد از تغییر نام فونت؛ کد های شما باید به صورت زیر باشن :

font-family: feria.ir;

font: 13pt feria.ir;

شما باید این کار رو برای تمامی گزینه های پیدا شده انجام بدید تا فونت دلخواه شما به صورت کامل به قالبتون اضافه شه!

توجه داشته باشید برای اینکه فونت ها به درستی نمایش داده شوند باید نام فونت را از قسمت font-family که به پوسته معرفی کردید انتخاب کنید.

تو این مثال که ما قصدمون آموزش افزودن فونت دلخواه به پوسته وردپرس بود؛

نامی که برای معرفی فونت باید مورد استفاده بگیره “feria.ir” هست ؛

لطفاً توجه داشته باشید که این نام به بزرگی و کوچکی حروف حساس هست!

یه نکته : وقتی شما از فونت دلخواهتون استفاده کنید میتونید هر نامی رو در قسمت font-family بنویسید که به عنوان شناسه فونت در فایل استایل استفاده بشود.

یه نکته طلایی : اگر توی قالب شما از آیکون فونت استفاده شده؛ شما نباید فونت هایی که به شکل زیر هست رو تغییر بدید :

font-family:’FontAwesome’;

font-family:”Ionicons”;

font-family: ‘Material Icons’;

من همین سه مورد رو مثال زدم فونت آیکون های بیشتری موجود هست.