Google Shriftlari

Agar HTML-da standart shriftlardan foydalanishni istamasangiz, siz Google Fonts'dan foydalanishingiz mumkin.

Google Shriftlari bepul va ular orasidan 1000 dan ortiq shriftlarni tanlash mumkin.

Google Shriftlarini qanday ishlatish kerak

Shunchaki <head> qismiga maxsus stylesheet havolasini qo'shing va shriftni CSS'da belgilang.

Misol

Bu yerda biz Google Fonts'dan "Sofia" nomli shriftni ishlatmoqchimiz:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />
  <style>
    body {
      font-family: 'Sofia', sans-serif;
    }
  </style>
</head>

Natija:

Sofia Shrifti Lorem ipsum dolor sit amet.

123456790

Misol

Bu yerda biz Google Fonts'dan "Trirong" nomli shriftni ishlatmoqchimiz:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong" />
  <style>
    body {
      font-family: 'Trirong', serif;
    }
  </style>
</head>

Natija:

Trirong Shrifti Lorem ipsum dolor sit amet.

123456790

Misol

Bu yerda biz Google Fonts'dan "Audiowide" nomli shriftni ishlatmoqchimiz:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide" />
  <style>
    body {
      font-family: 'Audiowide', sans-serif;
    }
  </style>
</head>

Natija:

Audiowide Shrifti Lorem ipsum dolor sit amet.

123456790

Eslatma: CSS'da shriftni belgilashda, kutilmagan hodisalardan qochish uchun, har doim kamida bitta fallback shriftni qo‘shing. Shu sababli, bu yerda ham ro‘yxat oxiriga umumiy shrift oilasini (serif yoki sans-serif kabi) qo‘shing.

Barcha mavjud Google Shriftlari ro‘yxati uchun bizning "Google Shriftlardan foydalanish" qo‘llanmamizga tashrif buyuring.

Bir nechta Google Shriftlaridan foydalanish

Bir nechta Google Shriftlaridan foydalanish uchun, shunchaki shrift nomlarini pipe belgisi (|) bilan ajrating, quyidagidek:

Misol

Bir nechta shriftlarni so'rang:

<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>

Natija:

Audiowide Shrifti Sofia Shrifti Trirong Shrifti

Eslatma: Bir nechta shriftlarni so‘rash web-sahifalaringizni sekinlashtirishi mumkin! Shunga e’tibor bering.

Google Shriftlarini uslubga keltirish

Albatta, Google Shriftlarini CSS bilan xohlaganingizcha uslubga keltirishingiz mumkin!

Misol

"Sofia" shriftini uslubga keltiring:

<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>

Natija:

Sofia Shrifti Lorem ipsum dolor sit amet.

123456790

Shrift Effektlarini Faollashtirish

Google shuningdek, foydalanishingiz mumkin bo‘lgan turli shrift effektlarini ham faollashtirgan.

Birinchi navbatda, Google API'ga effect=effectname ni qo'shing, keyin maxsus effektni ishlatadigan elementga maxsus class nomini qo'shing. Class nomi har doim font-effect- bilan boshlanib, effectname bilan tugaydi.

Misol

"Sofia" shriftiga olov effektini qo'shing:

<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>

Natija:

Sofia olovda

Bir nechta shrift effektlarini so'rash uchun shunchaki effekt nomlarini pipe belgisi (|) bilan ajrating, quyidagidek:

Misol

"Sofia" shriftiga bir nechta effekt qo'shing:

<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 Effekti</h1>
  <h1 class="font-effect-outline">Kontur Effekti</h1>
  <h1 class="font-effect-emboss">Kabartma Effekti</h1>
  <h1 class="font-effect-shadow-multiple">Bir nechta Soyali Effekt</h1>
</body>

Natija:

Neon Effekti Kontur Effekti Kabartma Effekti Bir nechta Soyali Effekt

Google Shriftlari

Ushbu sahifada