کمک وردپرس

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

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

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

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

فرمت فونت های وب (Web Fonts)

فونت های مخصوص وب دارای فرمت های متعددی هستند. این فرمت ها عبارتند از TTF, OTF, WOFF, WOFF2, SVG و EOT.
هر یک از این فرمت ها در ورژن های خاصی از مرورگرهای خاصی قابل استفاده هستند. مثلا مرورگر Internet Explorer از فرمت های WOFF2 و SVG پشتیبانی نمیکند. این در حالی است که فرمت EOT فقط توسط اینترنت اکسپلورر پشتیبانی شده و توسط هیچ یک از مرورگرهای دیگر مانند اپرا، کروم، سافاری و فایرفاکس مورد استفاده قرار نمیگیرد.

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

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

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

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

پیوست فونت به CSS

برای اضافه کردن فونت به CSS از عبارت @font-face استفاده میکنیم.
باید در نظر داشته باشید که هر فونت سفارشی که میخواهید در سایت استفاده کنید را باید حتما ابتدا به css سایت خود اضافه کرده باشید. در غیر این صورت این فونت برای کاربران به درستی به نمایش در نیامده و در کامپیوتر هر شخص از یک فونت جایگزین برای آن استفاده خواهد شد. بنابراین تعریف فونت در فایل استایل قالبتان را فراموش نکنید.

بیشتر بخوانید :  افزایش امنیت وردپرس با Brute Force Login Protection

برای پشتیبانی از همه مرورگر ها

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

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

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

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

پشتیبانی از اکثر مرورگرها

تعریف کردن همه فرمت های فونت به نظر کمی زیاده روی میرسد! از طرفی ممکنه است شما همه فرمت های وب فونت دلخواهتان را در اختیار نداشته باشید. اما اکثر فونت ها حتما حداقل سه فرمت TTF, WOFF و WOFF2 را در اختیار شما قرار میدهند. بنابراین برای پشتیبانی منطقی از اکثر مرورگرهایی که امروزه توسط کاربران مورد استفاده قرار میگیرند میتوانید از دستورات زیر استفاده کنید:

فقط پشتیبانی از مرورگرهای مدرن

انتظار میرود که در آینده نه چندان دور، همه مرورگرها از فرمت WOFF2 پشتیبانی کنند. بنابراین اگر بخواهید فقط مرورگرهای مدرن امروز (کروم ورژن ۳۶ به بعد، فایرفاکس ورژن ۳۵ به بعد، اپرا ۲۳ به بعد و آندروید ۳۷ به بعد) را هدف بگیرید میتوانید فقط و فقط از فرمت WOFF2 استفاده کنید. در این حالت کد شما به شکل زیر در خواهد آمد:

استفاده از Google Fonts یا فونت های گوگل

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

Google Fonts فونت های متنوع و متعددی را خصوصا برای زبان انگلیسی در اختیار شما قرار میدهد. در میان این فونت ها، یکی دو تا فونت زیبا برای نمایش فارسی نیز به چشم میخورند. اگر بخواهید بجای فونت های آپلود شده روی هاست خود از فونت های گوگلی استفاده کنید، میتوانید از دو روش مختلف استفاده کنید. روش اول فراخوانی فونت در فایل CSS شما با دستور @import است. برای انجام این کار کافی است از کد زیر استفاده کنید:

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

روش دوم فراخوانی فونت با استفاده از تگ link در html است. در این حالت میتوانید فونت دلخواه را در ناحیه head سایت خود به شکل زیر صدا کنید:

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

خوب، تا اینجا دیدیم که چطور میتوانید فونت دلخواهمان را به روش های مختلف به سایت اضافه کنیم. در واقع بخش اصلی کار ما به پایان رسیده و خشت اول را به درستی در محل خود قرار داده ایم. پس از تعریف فونت دلخواه (چه فونت های عادی و چه فونت های گوگلی)، حالا نوبت به استفاده از آن در محل های مورد نظرمان میرسد. فرض کنید که میخواهیم فونت تگ body سایت را روی فونت دلخواهمان تنظیم کنیم. برای این کار میتوانید از کد زیر استفاده کنید:

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

در مثال بالا ما فونت را برای بدنه سایت تعیین کردیم، ولی در این رابطه محدودیتی برای شما وجود ندارد و میتوانید از فونتی که در سایت فراخوانی کرده اید، برای انواع عناصر سایتتان از جمله تگ های p, li, span, a و یا هر کلاس یا id دیگری نیز بهره بگیرید.

پیشنهاد: همچنین میتوانید آموزش تغییر فونت متن در وردپرس با افزونه WP Google Font را مطالعه کنید.
امیدوارم نکات ذکر شده در این نوشته، برای شما عزیزان مفید و کاربردی باشد.
موفق و پاینده باشید…

مطالب زیر را حتما مطالعه کنید
نظرات و دیدگاه ها
  • نظرات ارسال شده توسط شما، پس از تایید توسط مدیران سایت منتشر خواهد شد
  • نظراتی که حاوی تهمت یا افترا باشد منتشر نخواهد شد
  • نظراتی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد

هنوز دیدگاهی منتشر نشده است