آموزش ابزار گوگل فونت – Google Font

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

آموزش ویدیویی گوگل فونت

شما می توانید از طریق ویدئوی زیر طریقه استفاده از Google font را مشاهده کنید:

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

آموزش ابزار Google Fonts بصورت متنی

همانطور که گفته شد این ابزار بسیار کاربردی و به اصطلاح کار راه انداز است، برای شروع کافیست وارد سایت fonts.google.com شوید.

معرفی بخش های سایت fonts.google.com

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

1- سرچ باکس

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

2- باکس جمله نمونه

یکی از امکانات جالب گوگل فونت این است که می توانید در باکس sentences متنی را بعنوان نمونه نوشته و خروجی را بصورت لایو تماشا کنید. این کار باعث می شود که فونت بهتر و مناسب تری را در زمان کوتاه تر انتخاب نمایید. ( در شکل بالا، باکس سبز)

3- باکس فونت سایز

شما می توانید بزرگی و کوچکی جمله ای که بصورت نمونه نوشتید را با این فیلد مدیریت کنید تا خروجی بهتری را ببینید. ( شکل بالا، باکس آبی)

4- فیلتر ها

در زیر سرچ باکس ( در شکل بالا، زیر کادر قرمز رنگ )، چند فیلتر وجود دارد تا بتوانید بسیار حرفه ای تر فونت مورد نظرتان را پیدا کنید.

• Category: موضوع یا به عبارتی دیگر نوع فونت ( مانند Serif, Sans, Handwriting)
• Language: زبان (متاسفانه زبان فارسی توسط گوگل فونت پشتیبانی نمی شود ولی از فونت های عربی می توانید استفاده کنید.)
• property: مشخصه های هر فونت مانند ضخامت، عرض و …

5 – فونت ها

در نهایت در زیر فیلتر ها، فونت هایی که قبلا با موارد بالا آنهارا فیلتر کرده اید شما نمایش داده می شود. با کلیک بر روی هر فونت وارد صفحه ی آن فونت می شوید:

فلش آبی شکل بیانگر اسم فونت است که زیر آن نام طراح آن نیز ذکر می شود. ( برای مثال در شکل بالا نام فونت :Roboto و طراح آن Christian Robertson) می باشد.

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

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

نحوه دانلود فونت از گوگل فونت

همانطور که گفتیم بعد از کلیک بر روی هر فونت صفحه ی مربوط به آن فونت برایمان باز می شود. می توانید مطابق شکل زیر که با فلش سبز رنگ مشخص کرده ایم، با کلیک بر روی دکمه Download family نسبت به دانلود فونت مورد نظر اقدام نمایید.

نحوه استفاده از گوگل فونت در سایت

برای استفاده از فونت ها برای سایت خود می بایست استایل فونت مورد نظر خود را انتخاب کنید. این کار را با کلیک بر روی Select this style می توانید انجام دهید. (کادر قرمز عکس پایین) :

سپس در کادری که کنار سایت باز می شود ( کادر سبز رنگ شکل بالا ) می توانید بصورت CDN یا دانلودی از فونت ها استفاده کنید. برای استفاده کافیست کادر طوسی رنگی که با فلش بنفش مشخص کرده ایم را کپی کنید و در هدر سایت خود ( بین تگ head قرار دهید).

باکس خاکستری که با فلش آبی رنگ مشخص شده است نیز حاوی مقداری است که باید به selector المان مورد نظر خود در css بدهید. برای مثال برای اینکه در کل سایت از فونت Roboto استفاده شود از کد زیر استفاده میکنیم.

body {
   font-family: 'Roboto', sans-serif;
}

برای اینکه المانی با کلاس و یا آیدی tutsxen فونتش roboto شود بصورت زیر عمل می کنیم:

/* المان با کلاس تاتژن; */
.tutsxen {
     font-family: 'Roboto', sans-serif;
}
/* المان با آیدی تاتژن */
#tutsxen {
    font-family: 'Roboto', sans-serif;
}

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