CSS Dersleri 15 - Google Font Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Google Font Kullanımı konusunu öğreneceğiz.

HTML'de standart yazı tiplerinden herhangi birini kullanmak istemiyorsanız, Google Font kullanabilirsiniz.Google Font kullanımı ücretsizdir ve aralarından seçim yapabileceğiniz 1000'den fazla yazı tipi vardır.

Google Font Nasıl Kullanılır ?

Google Font sitemize eklemek için, head etiketi arasına Google Font'u eklememiz yeterlidir sonrasında CSS içerisinde o fontun ismini kullanabiliriz.

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

Birden Fazla Google Font Eklemek

Birden çok Google yazı tipini kullanmak için yazı tipi adlarını bir dikey çizgi karakteriyle (|) ayırmanız yeterlidir, örneğin:

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

Not: Birden çok yazı tipi istemek web sayfalarınızı yavaşlatabilir! Bu yüzden dikkatli olun.

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla