مقدمه
استفاده از فونت‌های گوگل (Google Fonts) در طراحی وب بسیار محبوب است زیرا دسترسی آسان و تنوع بالایی دارند. با CSS می‌توانید این فونت‌ها را به راحتی به سایت خود اضافه کرده و استایل‌های متن را حرفه‌ای کنید. برای یادگیری کامل CSS و تکنیک‌های مدرن فونت، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.
توضیح مفهومی استفاده از فونت‌های گوگل
فونت‌های گوگل به صورت رایگان و تحت وب در دسترس هستند و می‌توان با افزودن لینک یا @import در CSS آن‌ها را به پروژه اضافه کرد.
روش‌های اضافه کردن فونت گوگل:
- استفاده از تگ <link> در بخش <head> HTML
- استفاده از @import در CSS
- استفاده از ویژگی font-family برای اعمال فونت
مثال عملی با کد
اضافه کردن فونت با <link>:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">اعمال فونت در CSS:
body {
font-family: "Roboto", sans-serif;
}استفاده از @import در CSS:
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
p {
font-family: "Open Sans", sans-serif;
}نکات مهم و توضیحات تکمیلی
- فونت‌های گوگل سرعت بارگذاری مناسبی دارند و رایگان هستند.
- ترتیب فونت‌ها در font-family اهمیت دارد.
- فونت‌های وب استاندارد باعث سازگاری با مرورگرها می‌شوند.
- در طراحی Responsive توجه به خوانایی و سایز فونت ضروری است.
ادامه آموزش CSS
برای یادگیری کامل طراحی حرفه‌ای لینک‌ها، دکمه‌ها و استایل‌دهی عناصر تعاملی، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.
آموزش قبلی: آموزش کار با فونت ها یا Fonts در CSS
آموزش بعدی: آموزش کار با لینک ها در CSS
دیدگاه و پرسش