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

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

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

یافتن فونت های وب گوگل که شما دوست دارید

اولین کاری که باید انجام دهید که این است که فونت های گوگلی که دوست دارید را پیدا کنید. به سایت فونت های گوگل بروید و در کتابخانه و فهرست های آن شروع به جستجو کنید. هنگامی که فونتی را که دوست دارید یافتید بر روی دکمه Quick-use کلیک کنید.

بعد از این که بر روی دکمه Quick-use کلیک کردید به یک صفحه جدید می روید. به پایین بیایید تا جایی که باکس دستور العمل استفاده از کدی که می توانید وارد وب سایت خود کنید را ببینید.

خواهید دید که سه تب مختلف برای اضافه کردن فونت به وب سایت شما وجود دارد. اولین آنها یک راه استاندارد و توصیه شده است تا فونت های گوگل را اضافه کنید. تب دوم استفاده از روش @import CSS است و تب استفاده از روش جاو اسکریپت است.

 

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

بیشتر دیده شده است که مردم از دو روش اول برای اضافه کردن فونت استفاده کرده اند. آسان ترین روش باز کردن فایل style.css است و سپس قرار دادن کدی که در تب @import به دست آورده اید در آن، مانند زیر:

۱ @import url(http://fonts.googleapis.com/css?family=Lora);

۲ @import url(http://fonts.googleapis.com/css?family=Oswald);

شما همچنین می توانید چندین درخواست برای فونت را در یکی خلاصه کنید. به شکل زیر:

۱ @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

این روش فوق العاده آسان است اما بهترین راه برای اضافه کردن فونت های گوگل به سایت وردپرس شما نیست. استفاده از روش بلوک های @import با دانلودها موازی می شود که به این معناست که مرورگر صبر می کند تا ابتدا دانلود فایل های وارد شده به پایان برسد و سپس بقیه ی مطالب را دانلود می کند.

اگر مجبور هستید که از @import استفاده کنید، حداقل چندین درخواست را در یکی خلاصه کنید.

روش بهبود یافته عملکرد اضافه کردن فونت های وب گوگل

بهترین راه برای اضافه کردن فونت های گوگل استفاده از روش استاندارد که از روش لینک به جای روش وارد کردن استفاده می کند. به سادگی URL فونت خود را که در قدم اول یافته اید کپی کنید. اگر می خواهید چندین فونت را اضافه کنید می توانید کد دو فونت را با کاراکتر | به هم متصل کنید. سپس کد را در بخش سربرگ قالب خود وارد کنید.

شما به احتمال زیاد باید فایل header.php خود را ویرایش کنید و کد زیر را بالای بخش اصلی قرار دهید. یک مثال برای این موضوع به شکل زیر است:

۱ <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lora|Oswald” media=”screen”>

۲ <link rel=”stylesheet” type=”text/css” href=”YOUR THEME STYLESHEET” media=”screen”>

به طور اساسی هدف این است که درخواست فونت تا جایی که امکان دارد سریع اتفاق بیفتد. بر اساس نوشته های وبلاگ فونت های وب گوگل اگر یک تگ اسکریپت قبل از عبارت @font-face باشد، اینترنت اکسپلورر هیچ چیز دیگری را بالا نمی آورد تا هنگامی که فایل های فونت را دانلود نکرده باشد.

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

۱ h1 {

۲     font-family: ‘Oswald’, Helvetica, Arial, serif;

۳ }

حالا تعداد زیادی قالب های کوچکتر و فریم ورک های قالب در آنجا وجود دارد. توصیه نمی شود که فایل قالب اصلی خود را ویرایش کنید به ویژه هنگامی که از فریم ورک قالب خود استفاده می کنید.

اضافه کردن صحیح فونت های گوگل به وردپرس

یک راه دیگر برای اضافه کردن فونت های گوگل به وب سایت وردپرس شما وارد کردن کد فونت ها به فایل قالب functions.php است. مانند زیر:

۱ function wpb_add_google_fonts() {

۲

۳ wp_enqueue_style( ‘wpb-google-fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );

۴ }

۵

۶ add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ );

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

بارگذاری فونت های گوگل با استفاده از جاوا اسکریپت

برای این روش شما باید کدی که در بخش استفاده دستور العمل فونت های گوگل و در تب جاوا اسکریپت وجود داشت را کپی کنید. شما می توانید این کد را در قالب خود یا فایل header.php بلافاصله بعد از تگ  <head> قرار دهید.

آخرین نکته ای که در باره فونت های وب گوگل باید خدمتتان عرض کنیم این است که فونت هایی که استفاده نمی کنید را بارگذاری نکنید. برای مثال اگر فقط از نوع بولد و نرمال یک فونت می خواهید استفاده کنید استایل های دیگر را اضافه نکنید.

 

منبع

مطلب پیشنهادی

۷ روش برای گرفتن اسکرین شات در ویندوز۱۰

۷ روش برای گرفتن اسکرین شات در ویندوز۱۰ از همه و یا قسمتی از صفحه، …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *