فونت گوگل (Google Fonts)
«فونت گوگل (Google Fonts)» یک کتابخانه فونت رایگان است. اگر فونت های استاندارد را نمی پسندید، از این سرویس کمک بگیرید. همیشه هم یک فونت جایگزین بنویسید تا نمایش پایدار بماند.
چگونه از فونت گوگل استفاده کنیم؟
فقط یک لینک استایل در بخش <head> اضافه کنید. سپس نام فونت را در CSS بنویسید. «جایگزین (Fallback)» را هم در انتها قرار دهید.
نمونه: فونت Sofia با جایگزین
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
نمونه: فونت Trirong با خانواده serif
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
نمونه: فونت Audiowide با sans-serif
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
نکته: همیشه حداقل یک خانواده عمومی در پایان زنجیره بنویسید. برای آشنایی با پشتیبان ها، صفحه جایگزین های فونت را ببینید. همچنین فونت گوگل کلیدواژه این مقاله است.
استفاده از چند فونت با یک لینک
برای چند فونت، نام ها را با کاراکتر | جدا کنید. سپس در CSS هرکدام را جداگانه استفاده کنید.
نمونه: درخواست چند فونت
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {
font-family: "Audiowide", sans-serif;
}
h1.b {
font-family: "Sofia", sans-serif;
}
h1.c {
font-family: "Trirong", serif;
}
</style>
</head>
هشدار: درخواست چند فونت می تواند سرعت صفحه را کم کند. فقط واقعاً لازم ها را بارگیری کنید.
استایل دهی فونت گوگل با CSS
پس از بارگیری فونت، هر استایلی که خواستید اعمال کنید؛ مثل اندازه یا سایه.
نمونه: استایل دهی به Sofia
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
فعال سازی افکت های فونت
می توانید افکت هایی مثل آتش یا نئون اضافه کنید. پارامتر effect=... را به لینک بدهید، سپس کلاس font-effect-... را روی المنت بگذارید.
نمونه: افکت آتش برای Sofia
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
نمونه: چند افکت همزمان
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
نکته: برای انتخاب اندازه مناسب، صفحه اندازه فونت را ببینید. برای ترکیب حرفه ای فونت ها، بعداً به «جفت سازی فونت ها» هم سر بزنید.
گام های عملی سریع
- فونت را در Google Fonts پیدا کنید.
- لینک استایل را در
<head>بگذارید. - font-family را با یک Fallback تنظیم کنید.
- در موبایل و دسکتاپ تست کنید.
جمع بندی سریع
- فونت گوگل رایگان و متنوع است.
- همیشه Fallback بنویسید.
- چند فونت سرعت را کم می کند.
- افکت ها را با احتیاط استفاده کنید.
- اندازه و وزن را منطقی تنظیم کنید.