این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه استفاده از فونت های گوگل
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از فونت های گوگل با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
معرفی فونت های گوگل یا Google Fonts
گوگل فونت یا به انگلیسی Google Font ، مجموعه ای از فونت های آنلاین تایپوگرافی ( TypoGraphy ) که توسط گوگل ایجاد شده اند و قابل استفاده در انواع وبسایت ها در سرتاسر دنیا می باشند.
یعنی از هرکجای دنیا باشی یا سایتت از هرنوعی باشه بازم فرقی نمیکنه، میشه خیلی راحت از فونت های گوگل استفاده کرد، کافیه فقط اینترنتت وصل باشه فقط همین.
این فونت ها متعلق به گوگل می باشند و باید بصورت آنلاین بهشون دسترسی پیدا کرد، یعنی در واقع باید حتما اینترنت وصل باشه تا بتونه بره از سایت گوگل فونت هارو بخونه و داخل صفحه به نمایش بگذاره.
Free-Learn
نحوه استفاده از فونت های گوگل
خب میریم که در ادامه ببینیم چجوری میتونیم از فونت های گوگل در صفحه وبمون ( یک فایل HTML ) ( یا هم سایتمون ) استفاده کنیم.
- قدم اول
باید وارد سایت گوگل و بخش فونت ها بشیم، پس لطفا برای ورود به سایت رسمی گوگل فونت اینجا کلیک کنید، بعد از اینکه روی لینک کلیک کردید وارد صفحه ای همانند تصویر زیر میشید.
در این تصویر من یسری شماره گذاری انجام دادم که در ادامه توضیحات هرکدومو خدمتتون میدم.
- این قسمت اسمش فیلتر هست، یعنی برای فیلتر کردن فونت ها ( مثلا قسمت Language میتونیم فونت هارو در زبان های مختلف که وجود دارند انتخاب کنیم، مثلا برای زبان فارسی باید Arabic رو انتخاب کنید )
- در این قسمت لیست فونت هارو میتونید مشاهده نمایید، ( دیگه همینجور اسکرول کنید برید پایین براتون موارد بیشتر لود میشه ) دیگه رو هرکدوم که کلیک کنید میره به یک صفحه مجزا که بعدش میتونیم کدهاشو دریافت کنیم
- در این قسمت میتونید در بین فونت ها جستجو بزنید ( مثلا اسم یه فونت رو میتونید جستجو بزنید )
- این قسمت که آیکونش شبیه یجور سبد خرید میمونه، در واقع با اضافه کردن یک یا چندین فونت در این سبد میتونیم در ادامه کدهاشو دریافت و در سایتمون قرار بدیم
- قدم دوم
خب حالا روی یکی از فونت های مدنظرتون کلیک کنید ( هرفونتی که خودتون دوس داشتید ) تا وارد صفحه مختص به همون فونت بشید، مثلا من به دلخواه خودم یه فونت عربی / فارسی به اسم Rubik انتخاب کردم ( مشاهده این فونت )
بعدش که وارد صفحه فونت شدیم، دیگه اطلاعاتی همچون نام فونت، یه پیش نمایش از فونت، وزن های فونت و.. رو میتونید مشاهده نمایید. ( همانند تصاویر زیر )
- در این قسمت Type tester میتونیم به دلخواه خودمون این فونت رو در یک محیط زنده ( ادیتور ) تست بزیم، مثلا هرمتنی دوس داشتیم تایپ کنیم و این فونت رو بطور دقیق بررسی کنیم.
- در قسمت Glyphs هم میتونیم شکل تک به تک کاراکترهای این فونت رو مشاهده نماییم.
- در این قسمت نام فونت نشون داده میشه، مثلا این فونتی که من انتخاب کردم اسمش Rubik هس.
- با کلیک بروی دکمه ” Download family ” میتونیم همین فونت رو با تمامی وزن هاش دانلود کنیم، که یک فایل فشرده بهممون تحویل میده.
- در این قسمت هم که دیگه مشخصه، یه متن بصورت پیش فرض با همین فونتی که انتخاب کردیم نشون میده که ما در واقع بتونیم یه پیش نمایش از فونت ببینیم.
- در این قسمت میتونید یه متن به دلخواه خودتون تایپ کنید، که دیگه این متن رو میتونید در وزن های مختلف مشاهده نمایید.
- همون متنی که در قسمت ۶ وارد کردیم رو میتونیم در وزن های مختلف ببینیم.
- با کلیک بروی هریک از این دکمه ها، میتونیم وزن مورد نظر اون فونت رو به سبد خرید ( همون دکمه ای که گفتم شبیه سبد خرید هستش ) اضافه کنیم.
- در نهایت در این قسمت میتونیم اندازه یا سایز همون فونت دلخواهی که تایپ کردیم رو کم و زیاد کنیم.
Free-Learn
روش های استفاده از فونت های گوگل
بطور کلی ۲ روش برای استفاده یا هم اضافه کردن فونت های گوگل در صفحه وبمون وجود داره :
- اضافه کردن فونت گوگل از طریق تگ Link
- اضافه کردن فونت گوگل از طریق ایمپورت یا Import کردن
که در ادامه من این ۲ روش رو بطور کامل برای شما دوستان عزیز توضیح میدم، که البته چیز خیلی عجیب غریبی نیست و خیلی سادس، پس لطفا در ادامه با من همراه باشید.
Free-Learn
اضافه کردن فونت گوگل از طریق تگ Link
خب خیلی راحت ما باید اول فونت مورد نظرمون رو بهمراه وزنش انتخاب کنیم ( یعنی تو اون تصویر بالا، توضیح شماره ۸ میشه ) در نهایت مثلا من میخوام وزن ۳۰۰ رو انتخاب کنم، پس باید روی
کلیک کنم، بعدش یک پنجره باز میشه : ( همانند تصویر زیر )
- در این قسمت میتونید لیست فونت هایی که انتخاب کرده اید رو ببینید ( این یعنی همزمان میتونید چندین فونت در چندین وزن رو انتخاب کنید )
- در این قسمت میتونیم روش استفاده از فونت رو انتخاب کنیم، که من <link> رو انتخاب کردیم
- در نهایت در این قسمت کدهایی هستش که ما باید اونارو در سایتمون قرار بدیم تا فونت در صفحه فراخوانی شه
- و در آخر در این قسمت نام فامیلی فونت رو بهمون نشون میده ( این یعنی ما باید از این فامیلی استفاده کنیم تا فونت مون در صفحه نمایش داده بشه )
Free-Learn
اضافه کردن فونت گوگل از طریق ایمپورت یا Import کردن
خب در روش دوم، گوگل یه کد به ما تحویل میده که ما باید اون کدو در تگ style قرار بدیم.
Free-Learn
مثال های نحوه استفاده از فونت های گوگل
خب دوستان محترم در ادامه ی آموزش نحوه استفاده از فونت های گوگل میریم تا چندین مثال از روش های مختلف نحوه استفاده از فونت های گوگل در یک صفحه وب رو باهمدیگه کار کنیم.
مثال شماره ۱ : اضافه کردن فونت گوگل به صفحه از طریق روش اول ( یعنی تگ Link )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet"> <style> body{ font-family: 'Rubik', sans-serif; direction:rtl; } </style> </head> |
مثال شماره ۲ : اضافه کردن فونت گوگل به صفحه از طریق روش دوم ( یعنی Import کردن )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<head> <style> @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap'); body{ font-family: 'Rubik', sans-serif; direction:rtl; } </style> </head> |
مثال شماره ۳ : استفاده از یک فونت در چندین وزن ( وزن های ۳۰۰ ، ۵۰۰ و ۸۰۰ )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;800&display=swap'); body{ font-family: 'Rubik', sans-serif; direction:rtl; } h2{ font-weight:800; } p{ font-weight:500; } </style> |
مثال شماره ۴ : استفاده از چندین فونت بطور همزمان در چندین وزن ( وزن های ۳۰۰ ، ۵۰۰ و ۸۰۰ ) ،در این مثال از فونت های Rubik و Vazirmatn در وزن های ۳۰۰ ، ۵۰۰ و ۸۰۰ استفاده شده
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;800&family=Vazirmatn:wght@300;500;800&display=swap'); body{ direction:rtl; } h2.Text_1{ font-family: 'Rubik', sans-serif; font-weight:800; } p.Text_1{ font-family: 'Rubik', sans-serif; font-weight:300; } h2.Text_2{ font-family: 'Vazirmatn', sans-serif; font-weight:800; } p.Text_2{ font-family: 'Vazirmatn', sans-serif; font-weight:300; } </style> |
مثال شماره ۵ : همون مثال شماره ۴ هس فقط این از روش Link
|
1 2 3 |
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;800&family=Vazirmatn:wght@300;500;800&display=swap" rel="stylesheet"> |
مثال شماره ۶ : استفاده از روش Link بصورت ساده تر ( به اینصورت هم میشه استفاده کرد )
|
1 |
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300" rel="stylesheet"> |
Free-Learn
نحوه استفاده از افکت های گوگل فونت
در ادامه آموزش نحوه استفاده از فونت های گوگل لطفا همچنان با من همراه باشید، گوگل یسری افکت ( یا به انگلیسی Effect ) برای استفاده بروی فونت ها ایجاد کرده که در ادامه میخوایم نحوه استفاده از این افکت هارو یاد بگیریم.
- افکت ها :
- fire
- neon
- outline
- emboss
- shadow-multiple
- anaglyph
- ۳d
- ۳d-float
- fire-animation
شکل کلی برای استفاده از افکت ها بصورت زیر می باشد :
- قدم اول فراخوانی افکت
|
1 2 3 4 5 |
<link rel=".." href="...&effect=[Effect-Name-1]|[Effect-Name-2]|.."> یا @import url('...&effect=[Effect-Name-1]|[Effect-Name-2]|..'); |
- [Effect-Name] : نام افکت
- برای فراخوانی چندین افکت بطور همزمان باید بینشون | گذاشت
- قدم دوم استفاده از کلاس افکت درون تگ های HTML
|
1 |
<h2 class="font-effect-[Effect-Name]">Free-Learn</h2> |
- [Effect-Name] : نام افکت
مثال شماره ۱ : فراخوانی ۱ عدد افکت و استفاده در تگ H2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Sofia&effect=3d'); h2{ font-family: 'Sofia', sans-serif; } </style> </head> <body> <h2 class="font-effect-3d">Free-Learn.IR</h2> </body> </html> |
مثال شماره ۲ : فراخوانی ۳ عدد افکت و استفاده در ۳ عدد تگ H2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> @import url('https://fonts.googleapis.com/css?family=Sofia&effect=3d|fire|shadow-multiple'); h2{ font-family: 'Sofia', sans-serif; } </style> </head> <body> <h2 class="font-effect-3d">Free-Learn.IR</h2> <h2 class="font-effect-shadow-multiple">Free-Learn.IR</h2> <h2 class="font-effect-fire">Free-Learn.IR</h2> </body> </html> |
Free-Learn
نکات و توضیحات
- برای فراخوانی و نمایش فونت ها در صفحه باید حتما اینترنت وصل باشه
- با توجه به اینکه باید بره از سایت گوگل فونت هارو فراخوانی کنه بهمین دلیل ممکنه در برخی موارد سرعت بارگذاری سایتتون رو تحت تاثیر قرار بده ( سعی کنید بیشتر از ۲ فونت در صفحه فراخوانی نکنید )
- بهترین و مطمعن ترین و بهینه ترین روش ( اون روش Import کردن ) هستش و راحتترین روش ( اون تگ Link )
+ همونطور که گفتم برای دانلود کردن فایل فونت باید بروی دکمه ” Download family ” کلیک کنیم، ولی خب حواستون باشه فرمتی که بهمون میده TTF هستش و اگه بخوایم از این فرمت بطور مستقیم در صفحه وبمون یا درکل در سایتمون استفاده کنیم خب نتیجه ای نداره و باید حتما به فرمت های woff و woff2 تبدیل کنیم.
+ که برای تبدیل یه فونت با فرمت TTF به دیگر فرمت ها ( مثه woff و.. ) میتونید از سایت های آنلاین ( مثه این سایت ) استفاده کنید، و در نهایت با استفاده از این آموزش میتونید فونت رو در سایتتون تعریف و استفاده کنید.
خب دوستان خسته نباشید میگم بهتون به پایان آموزش نحوه استفاده از فونت های گوگل رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید.
