Temmuz 2, 2024 - Okuma süresi: 20 dakika
.png)
Google Fonts, web tasarımcılarının ve geliştiricilerin ücretsiz olarak kullanabileceği, yüksek kaliteli fontlar sunan bir çevrimiçi hizmettir. Bu hizmet, çeşitli yazı tiplerini web sitelerinde ve projelerde kolayca kullanmanıza olanak tanır. Google Fonts, geniş bir yazı tipi kütüphanesi sağlar ve bu yazı tiplerini web sitenize entegre etmek oldukça basittir.
Google Fonts Nasıl Kullanılır?
1. Google Fonts Web Sitesine Gitme:
o Google Fonts web sitesini ziyaret edin.
2. Yazı Tipi Seçme:
o Kullanmak istediğiniz yazı tipini seçin. Yazı tipini seçtikten sonra, yazı tipi ailesi sayfasına yönlendirileceksiniz.
3. Yazı Tipi Stillerini Seçme:
o Yazı tipi ailesi sayfasında, kullanmak istediğiniz stil ve ağırlıkları seçin.
4. Embed Kodu Alma:
o Sağ üst köşede bulunan "Embed" düğmesine tıklayın. Bu, yazı tipini web sitenize eklemek için gerekli olan HTML ve CSS kodunu sağlayacaktır.
5. HTML Kodu Eklemek:
o Google Fonts tarafından sağlanan link etiketini, web sitenizin <head> bölümüne ekleyin. Örneğin:
html
Kodu kopyala
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
6. CSS Kodu Kullanma:
o Seçtiğiniz yazı tipini CSS dosyanızda kullanmak için gerekli olan CSS kuralını ekleyin. Örneğin:
css
Kodu kopyala
body {
font-family: 'Roboto', sans-serif;
}
Örnek Kullanım
Diyelim ki web sitenizde "Roboto" yazı tipini kullanmak istiyorsunuz. İşte adım adım nasıl yapacağınız:
1. Google Fonts Sitesinde Roboto Yazı Tipini Seçme:
o Roboto yazı tipine gidin ve gerekli stilleri seçin.
2. HTML'ye Ekleme:
html
Kodu kopyala
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
3. CSS'ye Ekleme:
css
Kodu kopyala
body {
font-family: 'Roboto', sans-serif;
}
Google Fonts, projelerinize estetik bir görünüm kazandırmak için harika bir kaynaktır ve kullanımı oldukça basittir.