فونت گوگل (Google Fonts) در CSS
اگر نخواهید از فونت های استاندارد HTML استفاده کنید، «فونت گوگل (Google Fonts)» گزینه ای رایگان با بیش از هزار فونت است. کافی است لینک استایل ویژه را در بخش <head> اضافه کنید و سپس نام فونت را در CSS به کار ببرید.
روش استفاده از فونت گوگل
پس از افزودن لینک استایل، در CSS عنصرهای خود را با نام فونت هدف تنظیم کنید. برای نمونه، فونت «Sofia» را چنین به کار ببرید:
body{ font-family: "Sofia", sans-serif; }نکته: همواره حداقل یک فونت جایگزین (مثلاً serif یا sans-serif) در انتهای فهرست قرار دهید تا از رفتارهای پیش بینی نشده جلوگیری شود.
نمونه های بیشتر: Trirong و Audiowide
پس از لینک دهی، کافی است نام فونت را در font-family بنویسید:
body{ font-family: "Trirong", serif; }
body{ font-family: "Audiowide", sans-serif; }استفاده از چند فونت گوگل
می توانید چند فونت را هم زمان درخواست کنید؛ نام ها در URL با کاراکتر | جدا می شوند. سپس در CSS برای هر بخش از نام مناسب استفاده کنید:
h1.a{ font-family:"Audiowide",sans-serif; }
h1.b{ font-family:"Sofia",sans-serif; }
h1.c{ font-family:"Trirong",serif; }هشدار: درخواست هم زمان چند فونت می تواند سرعت صفحه را کاهش دهد؛ پس با دقت انتخاب کنید.
استایل دهی به فونت گوگل
هر فونتی را مانند دیگر متن ها با CSS می توانید استایل دهی کنید؛ برای نمونه اندازه و سایه متن را تغییر دهید:
body{ font-family:"Sofia",sans-serif; font-size:30px; text-shadow:3px 3px 3px #ababab; }افکت های فونت گوگل
می توانید افکت های آماده را نیز فعال کنید. ابتدا پارامتر effect=نام افکت را به لینک اضافه کنید؛ سپس کلاسی با الگوی font-effect-نام افکت روی عنصر قرار دهید (مانند font-effect-fire، font-effect-neon، font-effect-outline، font-effect-emboss و font-effect-shadow-multiple).
برای ادامه یادگیری تایپوگرافی در CSS، به اندازه فونت و مرور کلی فونت ها سر بزنید. همچنین برای خوانایی بهتر، بخش سایه متن را ببینید.