اگر نمی‌خواهید از فونت‌های استاندارد HTML استفاده کنید، می‌توانید از Google Fonts استفاده کنید. فونت‌های گوگل رایگان هستند و بیش از ۱۰۰۰ فونت مختلف برای انتخاب دارند.
چگونه از فونت‌های گوگل استفاده کنیم
برای استفاده از فونت‌های گوگل، کافیست یک لینک مخصوص به استایل شیت را در بخش <head> اضافه کرده و سپس به آن فونت در CSS ارجاع دهید.
مثال ۱: استفاده از فونت "Sofia"
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>مثال ۲: استفاده از فونت "Trirong"
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>مثال ۳: استفاده از فونت "Audiowide"
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>نکته: هنگام استفاده از یک فونت در CSS، همیشه باید حداقل یک فونت جایگزین (Fallback) نیز اضافه کنید تا از رفتارهای غیرمنتظره جلوگیری شود. در پایان لیست فونت‌ها، یک خانواده عمومی (مثل serif یا sans-serif) قرار دهید.
استفاده از چندین فونت گوگل
برای استفاده از چند فونت گوگل، نام فونت‌ها را با کاراکتر | از هم جدا کنید:
مثال ۴: درخواست چندین فونت
<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=effectname را به API گوگل اضافه کرده و سپس یک کلاس ویژه با نام font-effect-effectname به عنصر مورد نظر اضافه کنید.
مثال ۶: افزودن افکت "آتش" به فونت "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>درخواست چندین افکت برای فونت
برای درخواست چندین افکت، نام افکت‌ها را با کاراکتر | از هم جدا کنید:
مثال ۷: افزودن چندین افکت به فونت "Sofia"
<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>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام