Html ve Css ile web sayfaları oluştururken sayfamızdaki yazılara tarayıcıların varsayılan font-family değerleri uygulanır. Sayfamızdaki bir yazının font-family değerini değiştirmek istediğimizde ise kullanabileceğimiz değerler sınırlıdır.
Peki tasarımlarımızda farklı fontlar kullanmak istediğimizde ne yapmalıyız?
Farklı alternatifler var tabiki ama bu yazımda Google Fonts kullanımını anlatacağım.
Google Fonts Kullanımı
Aşağıdaki gibi örnek Html kodlarımız olsun.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Fonts Kullanımı</title> </head> <body> <h1>Google Fonts Kullanımı</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nihil, ad odio, cum itaque sed incidunt ullam maxime voluptates fugiat quod. Ex, odio quo. Asperiores iste illo autem nulla facere!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nihil, ad odio, cum itaque sed incidunt ullam maxime voluptates fugiat quod. Ex, odio quo. Asperiores iste illo autem nulla facere!</p> </body> </html> |
Bu kodları tarayıcıda görüntüleyelim.
Şuan da hem h1 etiketinin hem de p etiketlerinin font-family değerine tarayıcının varsayılan değerleri atandı. Şimdi Google Fonts kullanarak bu yazılara istediğimiz fontu uygulayalım.
⇒ İlk olarak Google Fonts linklerini almak için sitesine gidiyorum.
Siteye gittiğinizde sizi 1005 farklı font bekliyor olacak. Eğer bildiğiniz bir font varsa direk arama kısmından fontu aratabilirsiniz. Yoksa da fontları tek tek inceleyerek hoşunuza giden fonta tıklayabilirsiniz.
⇒ Örneğimizde Dancing Script fontunu kullanacağım. Arama kutusundan aratıp ilgili fonta tıklıyorum.
⇒ Dancing Script fontunun 400, 500, 600 ve 700 kalınlığındaki tüm stillerini kullanmak istediğim için hepsinin sağındaki “Select this style” butonuna tıklayarak hepsini ekliyorum.
⇒ Gerekli linkleri almak için Embed butonuna tıklıyorum.
⇒ Html sayfamda bana gerekli olacak kodları buradan alıyorum.
⇒ İlk olarak linki kopyalayıp Html sayfamdaki <head> </head> etiketleri arasına yapıştırıyorum.
⇒ Daha sonra Html sayfamdaki hangi etikete bu fontu vermek istiyorsam font-family özelliğine “Dancing Script” değerini veriyorum.
Şimdi yukarıdaki Html kodlarımıza geri dönelim ve h1 etiketine farklı bir font p etiketlerine farklı bir font uygulayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Fonts Kullanımı</title> <!-- Dancing Script --> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet"> <!-- Fontdiner Swanky --> <link href="https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap" rel="stylesheet"> <style> h1{ font-family: 'Dancing Script', cursive; } p{ font-family: 'Fontdiner Swanky', cursive; } </style> </head> <body> <h1>Google Fonts Kullanımı</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nihil, ad odio, cum itaque sed incidunt ullam maxime voluptates fugiat quod. Ex, odio quo. Asperiores iste illo autem nulla facere!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nihil, ad odio, cum itaque sed incidunt ullam maxime voluptates fugiat quod. Ex, odio quo. Asperiores iste illo autem nulla facere!</p> </body> </html> |
Kodlarımızı tarayıcıda açalım.
Gördüğünüz gibi sayfamızdaki yazılara istediğimiz Google Fonts değerlerini başarıyla uyguladık.
Umarım “Web Sayfalarında Google Fonts Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Siteye Google Analytics Kodu Ekleme (Resimli Anlatım)
Site Haritası Oluşturma ve Google’a Site Haritası Ekleme
Yeni bir yazımda görüşmek üzere.
