چگونه بر روی سایت وردپرس خود فونت‌ نصب کنیم؟

استفاده از فونت های سفارشی در مطالبتان موجب می شود که جذابتر شوند و از طرفی به برجسته شدن وب سایتتان کمک می کند بنابراین اگر شما مایل هستید که از فونت های سفارشی استفاده نمایید ما را همراهی نمایید
اما شاید برای شما این سوال پیش می آید که در کجا باید از فونت های سفارشی استفاده نمود ؟
شما می توانید با استفاده از روش های Google Fonts و CSS3 @Font-Face و همچنین TypeKit از فونت های سفارشی استفاده نمایید و در حال حاضر استفاده از فونت های سفارشی در تم های وردپرس بسیار رایج شده است ک با اینکه امکان دارد بعضی از تم ها را با چندین فونت سفارشی بارگذاری نمود ولی استفاده بیش از حد از فونت نیز موجب کندی می شود در ادامه با ما باشید تا به شما نحوه استفاده از فونت های سفارشی را آموزش دهیم

چگونه فونت‌های مرسوم را برای استفاده در وردپرس بیابیم؟

برای اینکه از فونت های رایگان استفاده نمایید می توانید به Google Fonts ، Typekit، FontSquirrel و fonts.com مراجعه نمایید.اما اگر در مورد در هم امیخن . مطابقت دادن فونت ها اطلاعات کافی ندارید می توانید Font Pair را امتحان کنید. این ابزار به طراحان کمک می‌کند تا فونت‌های گوگل زیبایی را با هم جور کنند.

اضافه کردن فونت‌های مرسوم در وردپرس با استفاده از Google Fonts

google fontsاین منبع به شما کمک می کند تا تایپوگرافی های زیبا را به صورت رایگان به پروزه خود اضافه نمایید و این امکان وجود دارد که کاربران فونت های سفارشی گوگل را به وب سایت وردپرسی خود اضافه نمایند
می توانید برای انتخاب فونت موردنظر خودتان از کتابخانه فونت‌های گوگل استفاده نمایید و سپس مطابق شکل زیر دکمه استفاده سریع را انتخاب نمایید

این شما را به صفحه دیگری می‌برد که از شما خواسته می‌شود استایل‌هایی (سبک‌هایی) که می‌خواهید را انتخاب کنید. باید تنها استایل‌هایی را انتخاب کنید که فکر می‌کنید واقعا استفاده خواهید کرد. پس از آن، کمی به پایین حرکت کنید تا زمانی که به قسمت جاسازی کد زیر برسید. باید کد نشان داده شده را در زیر تب استاندارد کپی کنید و آن را در تم خود یا فایل header.php چایلد تم (child theme) خود درست پس از تگبچسبانید (paste).

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

اضافه کردن فونت‌های سفارشی در ورد پرس با استفاده از CSS3 @font-face

 

استفاده از متد CSS3 @font-face یکی از راحت ترین روش برای اضافه کردن فونت های سفارشی می باشد این متد این امکان را به شما می دهد که از هر فونتی که دوست داشتید استفاده نمایید
حتما باید فرمت فونت خود وب باشد و درصورتی که اینگونه نمی باشد می توانید می‌توانید آن را با استفاده از FontSquirrel Webfont generator تبدیل کنید.
باید فایل های فونت وبی را برروی سرور میزبانی خود آپلود نمایید و باید یک فولدر جدید برای آپلود فابل ها ایجاد نمایید
برای انکه فونت ها را آپلود نمایید می توانید از FTP یا File Manager کنترل پنل خود استفاده کنید.
باید فونت آپلود شده را در استایل شیت تم خود با استفاده از قانون CSS3 @font-face مانند زیر بارگذاری کنید:

نکته ای که باید توجه نمایید این است که font-family و آدرس صفحه (URL) را با نام خودتان جایگزین کنید.
پس از آن می‌توانید فونت را در هر جایی از استایل شیت تم خود مانند زیر استفاده کنید:

بارگذاری فونت‌ها به طور مستقیم با استفاده از CSS3 @font-face

همیشه بهترین راه حل نیست. اگر از یک فونت از Google Fonts یا Typekit استفاده می‌کنید، بهتر است فونت را به طور مستقیم از سرور آنها برای عملکرد مطلوب به کار گیرید.

اضافه کردن فونت‌های سفارشی در وردپرس با استفاده از Typekit

typekitمی توانید فونت های رایگان را استفاده نمایید و همچنین برای فونت های بسیار جذاب حق بیمه دارد
شما می توانید در حساب Typekit ثبت نام نمایید و اقدام به ساخت یک کیت جدید کنید

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

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

برچسب‌ها, , , ,

دیدگاه بگذارید

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