با Google Fonts API شروع کنید

این راهنما نحوه استفاده از Google Fonts API را برای افزودن فونت به صفحات وب خود توضیح می دهد. شما نیازی به انجام هیچ برنامه نویسی ندارید. تنها کاری که باید انجام دهید این است که یک پیوند شیوه نامه خاص را به سند HTML خود اضافه کنید، سپس به فونت در سبک CSS مراجعه کنید.

یک مثال سریع

در اینجا یک مثال است. HTML زیر را کپی و در یک فایل پیست کنید:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

سپس فایل را در یک مرورگر وب مدرن باز کنید. شما باید صفحه ای را ببینید که موارد زیر را با فونت Tangerine نشان می دهد:

ساخت وب زیبا!

این جمله یک متن معمولی است، بنابراین می توانید با استفاده از CSS ظاهر آن را تغییر دهید. سعی کنید یک سایه به استایل مثال قبلی اضافه کنید:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

اکنون باید یک سایه در زیر متن مشاهده کنید:

ساخت وب زیبا!

و این تنها آغاز کاری است که می توانید با Fonts API و CSS انجام دهید.

نمای کلی

فقط در دو مرحله می توانید از Google Fonts API استفاده کنید:

  1. برای درخواست فونت(های) وب مورد نظر، پیوند صفحه سبک اضافه کنید:

    <link rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Font+Name">

  2. یک عنصر را با فونت وب درخواستی، یا در یک شیوه نامه، استایل کنید:

    .css-selector {
font-family: 'Font Name', serif;
}

    یا با یک سبک درون خطی روی خود عنصر:

    <div style="font-family: 'Font Name', serif;">Your text</div>

برای فهرست فونت‌هایی که می‌توانید استفاده کنید، فونت‌های Google را ببینید.

تعیین خانواده فونت ها و سبک ها در URL صفحه سبک

برای تعیین اینکه از چه URL در پیوند صفحه سبک خود استفاده کنید، با URL پایه Google Fonts API شروع کنید:

https://fonts.googleapis.com/css

سپس، پارامتر family= URL را با یک یا چند نام خانوادگی و سبک فونت اضافه کنید.

به عنوان مثال، برای درخواست فونت Inconsolata :

https://fonts.googleapis.com/css?family=Inconsolata

برای درخواست چندین خانواده فونت، نام ها را با یک کاراکتر لوله ( | ) جدا کنید.

به عنوان مثال، برای درخواست فونت های Tangerine ، Inconsolata و Droid Sans :

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

درخواست چندین فونت به شما این امکان را می دهد که از همه آن فونت ها در صفحه خود استفاده کنید. (اما زیاده روی نکنید، بیشتر صفحات به فونت های زیادی نیاز ندارند و درخواست فونت های زیاد ممکن است باعث کند بارگذاری صفحات شما شود.)

Google Fonts API نسخه معمولی فونت های درخواستی را به طور پیش فرض ارائه می کند. برای درخواست سبک ها یا وزن های دیگر، یک علامت : ) را به نام فونت اضافه کنید و پس از آن لیستی از سبک ها یا وزن ها را که با کاما ( , ) از هم جدا شده اند اضافه کنید.

به عنوان مثال:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

برای اینکه بدانید کدام سبک ها و وزن ها برای فونت معین موجود است، به فهرست فونت در فونت های Google مراجعه کنید.

برای هر سبکی که درخواست می‌کنید، می‌توانید نام کامل یا مخفف آن را بدهید. برای وزن ها می توانید وزن عددی را مشخص کنید:

سبک مشخص کننده ها
مورب italic یا i
پررنگ bold یا b یا وزن عددی مانند 700
مورب پررنگ bolditalic یا bi

به عنوان مثال، برای درخواست Cantarell italic و Droid Serif bold، می توانید از هر یک از URL های زیر استفاده کنید:

https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

از font-display استفاده کنید

font-display به شما امکان می دهد در زمانی که فونت در دسترس نیست چه اتفاقی می افتد را کنترل کنید. معمولاً تعیین مقداری غیر از auto پیش‌فرض مناسب است.

مقدار مورد نظر را در پارامتر display querystring ارسال کنید:

https://fonts.googleapis.com/css?family=Roboto&display=swap

تعیین زیر مجموعه های اسکریپت

برخی از فونت‌های فهرست فونت گوگل از چندین اسکریپت (مثلاً لاتین، سیریلیک و یونانی) پشتیبانی می‌کنند. برای تعیین اینکه کدام زیرمجموعه باید دانلود شود، پارامتر زیر مجموعه باید به URL اضافه شود.

به عنوان مثال، برای درخواست زیرمجموعه سیریلیک فونت Roboto Mono ، URL به صورت زیر خواهد بود:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

برای درخواست زیرمجموعه یونانی فونت Roboto Mono ، URL به صورت زیر خواهد بود:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

برای درخواست زیرمجموعه های یونانی و سیریلیک فونت Roboto Mono ، URL به صورت زیر خواهد بود:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

زیرمجموعه لاتین در صورت موجود بودن همیشه گنجانده می شود و نیازی به تعیین آن نیست. لطفاً توجه داشته باشید که اگر یک مرورگر مشتری از unicode-range ( http://caniuse.com/#feat=font-unicode-range ) پشتیبانی می کند، پارامتر زیر مجموعه نادیده گرفته می شود. مرورگر از زیرمجموعه های پشتیبانی شده توسط فونت انتخاب می کند تا آنچه را که برای ارائه متن نیاز دارد، دریافت کند.

برای فهرست کامل فونت‌های موجود و زیرمجموعه‌های فونت، لطفاً به Google Fonts مراجعه کنید.

بهینه سازی درخواست فونت شما

اغلب اوقات، زمانی که می خواهید از یک فونت وب در وب سایت یا برنامه خود استفاده کنید، از قبل می دانید که به کدام حروف نیاز دارید. این اغلب زمانی اتفاق می افتد که از یک فونت وب در یک لوگو یا عنوان استفاده می کنید.

در این موارد، باید یک مقدار text= را در URL درخواست فونت خود مشخص کنید. این به Google اجازه می‌دهد فایل فونتی را که برای درخواست شما بهینه شده است، برگرداند. در برخی موارد، این می تواند اندازه فایل فونت را تا 90٪ کاهش دهد.

برای استفاده از این ویژگی، به سادگی text= به درخواست های Google Fonts API خود اضافه کنید. برای مثال اگر فقط از Inconsolata برای عنوان وبلاگ خود استفاده می کنید، می توانید عنوان را به عنوان مقدار text= قرار دهید. در اینجا درخواست به شکل زیر است:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

مانند تمام رشته‌های پرس و جو، باید مقدار URL را رمزگذاری کنید:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

این ویژگی همچنین برای فونت های بین المللی کار می کند و به شما امکان می دهد کاراکترهای UTF-8 را مشخص کنید. مثلا ¡هولا! به صورت زیر نمایش داده می شود:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

فعال کردن جلوه های فونت (بتا)

هنگام ساخت هدر یا نمایش متن در وب سایت خود، اغلب می خواهید متن خود را به روشی تزئینی سبک سازی کنید. گوگل برای ساده‌تر کردن کار شما مجموعه‌ای از جلوه‌های فونت ارائه کرده است که می‌توانید با کمترین تلاش برای تولید متن نمایشی زیبا از آن‌ها استفاده کنید. به عنوان مثال:

این یک افکت فونت است!

برای استفاده از این ویژگی بتا، کافی است effect= به درخواست Google Fonts API خود اضافه کنید و نام کلاس مربوطه را به عنصر(های) HTML که می‌خواهید تحت تأثیر قرار دهید اضافه کنید. در مثال بالا، از افکت shadow-multiple font استفاده کردیم، بنابراین درخواست به شکل زیر خواهد بود:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

برای استفاده از افکت، نام کلاس مربوطه را به عنصر(های) HTML خود اضافه کنید. نام کلاس مربوطه همیشه نام افکت با پیشوند font-effect- است، بنابراین نام کلاس برای shadow-multiple font-effect-shadow-multiple خواهد بود:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

می توانید با جدا کردن نام افکت ها با یک کاراکتر لوله ( | ) چندین افکت درخواست کنید.

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

در اینجا یک لیست کامل از تمام جلوه های فونت ارائه شده است:

اثر نام API نام کلاس پشتیبانی کنید
آناگلیف anaglyph font-effect-anaglyph کروم، فایرفاکس، اپرا، سافاری
علامت آجری brick-sign font-effect-brick-sign کروم، سافاری
چاپ بوم canvas-print font-effect-canvas-print کروم، سافاری
ترق crackle font-effect-crackle کروم، سافاری
در حال پوسیدگی decaying font-effect-decaying کروم، سافاری
تخریب destruction font-effect-destruction کروم، سافاری
مضطرب distressed font-effect-distressed کروم، سافاری
چوب پریشان distressed-wood font-effect-distressed-wood کروم، سافاری
برجسته کردن emboss font-effect-emboss کروم، فایرفاکس، اپرا، سافاری
آتش fire font-effect-fire کروم، فایرفاکس، اپرا، سافاری
انیمیشن آتش fire-animation font-effect-fire-animation کروم، فایرفاکس، اپرا، سافاری
شکننده fragile font-effect-fragile کروم، سافاری
چمن grass font-effect-grass کروم، سافاری
یخ ice font-effect-ice کروم، سافاری
میتوز mitosis font-effect-mitosis کروم، سافاری
نئون neon font-effect-neon کروم، فایرفاکس، اپرا، سافاری
طرح کلی outline font-effect-outline کروم، فایرفاکس، اپرا، سافاری
قرار دادن سبز putting-green font-effect-putting-green کروم، سافاری
فولاد خراشیده scuffed-steel font-effect-scuffed-steel کروم، سافاری
سایه چندگانه shadow-multiple font-effect-shadow-multiple کروم، فایرفاکس، اپرا، سافاری
خرد شده splintered font-effect-splintered کروم، سافاری
استاتیک static font-effect-static کروم، سافاری
سنگ شویی stonewash font-effect-stonewash کروم، سافاری
سه بعدی 3d font-effect-3d کروم، فایرفاکس، اپرا، سافاری
شناور سه بعدی 3d-float font-effect-3d-float کروم، فایرفاکس، اپرا، سافاری
قدیمی vintage font-effect-vintage کروم، سافاری
کاغذ دیواری wallpaper font-effect-wallpaper کروم، سافاری

راه های بسیار بیشتری برای استایل دادن به فونت های شما وجود دارد و بسیاری از چیزها از طریق CSS امکان پذیر است. ما به سادگی چند ایده برای شروع به شما ارائه می دهیم. برای ایده‌های بیشتر، جستجوی « افکت‌های متنی css » را در گوگل امتحان کنید و بسیاری از ایده‌هایی را که از قبل در وب هستند مرور کنید!

در ادامه مطلب

  • فهرست کاملی از خانواده فونت‌های ارائه شده توسط Google Fonts API در فونت‌های Google را مشاهده کنید.
  • نحوه استفاده از Web Font Loader را بیاموزید تا کنترل بیشتری بر بارگذاری فونت ها داشته باشید.
  • در صفحه ملاحظات فنی درباره نحوه عملکرد Google Fonts API بیشتر بدانید.