افزودن فونت فارسی به وردپرس با CSS (فونت ساحل)

فونت پیش‌فرض وردپرس برای نمایش حروف فارسی مناسب نیست. در این جلسه از دوره‌ی طراحی سایت با وردپرس، یاد می‌گیرید چطور بدون افزونه و فقط با آپلود فایل و نوشتن یک کد CSS، فونت فارسی را به وردپرس اضافه کنید. فونت رایگان ساحل را نصب می‌کنید و ظاهر متن‌های سایتتان را تغییر می‌دهید.

چرا باید فونت فارسی به وردپرس اضافه کنیم؟

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

فونت فارسی دو دسته است: تجاری و رایگان. فونت‌های تجاری را باید بخرید و سپس دانلود کنید، اما فونت‌ های رایگان هزینه‌ای ندارند. ساحل از نوع رایگان است؛ هم محبوب است و هم کاملا استاندارد.

مراحل افزودن فونت فارسی به وردپرس

سجاد سعادت در این جلسه کار را با دانلود فونت ساحل از سایت رسمی‌اش شروع می‌کند. پوشه‌ی فونت شامل فایل های مختلفی است که همه‌ی آن‌ها به کار شما نمی‌آیند. نسخه‌ای را انتخاب کنید که هم حروف فارسی و هم اعداد انگلیسی را پشتیبانی کند. دو فایل نسخه‌ی متغیر (VF) را هم کنار بگذارید. (جهت مشاهده جزئیات بیشتر حتما ویدئو لینک شده را مشاهده کنید.)

بعد نوبت به هاست می‌رسد. پوشه‌ی فونت‌ها را زیپ می‌کنید، داخل wp-content آپلود می‌کنید و با ابزار مرتبط که برای Extract کردن در فایل منیجر وجود دارد، فونت را از حالت فشرده خارج می‌کنید. یک نکته‌ی مهم؛ هر فونت وب باید چهار فرمت TTF، EOT، WOFF و WOFF2 داشته باشد تا مرورگرها و دستگاه‌های مختلف، حتی نسخه‌های قدیمی، متن را یکسان نشان دهند.

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

سپس فونت را برای بدنه‌ی سایت، عنوان‌ها (H1 تا H6)، فیلدهای ورودی، پاراگراف‌ها و لیست‌ها تعریف می‌کنید و جهت متن را راست‌ به‌ چپ می‌گذارید. کد را در بخش CSS اضافی سفارشی‌ سازی وردپرس می‌چسبانید و روی انتشار می‌زنید.

در پایان ویدیو، سجاد سعادت صفحه‌های سایت را قبل و بعد از اعمال فونت کنار هم نشان می‌دهد و تفاوت کاملا مشخص است. همچنین لینک دانلود نمونه کد CSS را هم در توضیحات ویدیو می‌گذارد. فقط آن را با نام فونت و مسیر پوشه‌ی خودتان تطبیق دهید. جزئیات هر مرحله در خود ویدیو است، پس همراه با آن پیش بروید.