Çarşamba, 23 Mayıs 2018
Google Fonts Sayfanızda Nasıl Kullanılır
Eğitim

Google Fonts Sayfanızda Nasıl Kullanılır

Doruk Karaboncuk Doruk Karaboncuk
05 Aralık 2016

Google fonts piyasaya çıktığından beri web sayfalarının görünüşlerinde ciddi bir güzelleşme oldu diyebiliriz.

Hızlı, yenilikçi ve çok çeşitli

İlk web sitelerinde kullanılan font mutlaka ziyaret eden kişinin de bilgisayarında yüklü olması gerekiyordu. Böyle olunca da sistem fontlarından başka font kullanımı olamıyordu.

Daha sonraları ise Cufon ortaya çıktı. Cufon’da istenilen her font kullanılsa da Google Fonts’un yerini almıyordu çünkü hem Google siteyi hafızasına alamıyor (Indexleme yapamıyor) hem de site boyutuna yüklü diyebileceğimiz bir yük katıyordu. 

Google Fonts kullanımı hem rahat, hem hızlı değişikliklere izin veriyor hem de ücretsiz. Web sayfasında yer alan sloganları da zaten webi daha güzel, daha hızlı hale getirmek.

Google Fonts 135 dile kadar destek verebiliyor.

Google Fonts web sayfasına ulaşmak için buraya tıklayabilirsiniz.

Sayfaya girdiğiniz de hemen fontlar açılıyor. Sağ tarafta bulunan bölümden size uygun fontlar hakkında filtreleme yapabiliyorsunuz. Kategori kısmında 5 farklı seçenek bulunuyor.

Onun altında bulunan sıralama seçeneği (Sorting) ise gösterimi alfabetik sıraya göre, trend listesine göre, popülariteye göre ve eklenme tarihine göre sıralamanıza olanak sağlıyor.

Onun hemen altında bulunan dil (Langauge) seçeneği bölümünden size uygun olan dilleri filtreleyebilirsiniz. Türkçe dil desteği istiyorsanız mutlaka Latin Extended seçeneğini işaretleyin.

Son seçenekler ise artık font görünüm ve ayarlarına göre kendinize göre kişiselleştirebilirsiniz. Harf genişliği, stil seçenekleri, harflerin eğikliği (slant) ve kalınlığını size özel ayarlayabilirsiniz.

Ayarlarınızı yaptıktan sonra artık istediğiniz fontu nasıl kullanacağınıza bakabiliriz.

Kullanmak istediğiniz font veya fontları sağ üst köşelerinde bulunan + düğmesine tıklayarak sepet mantığı ile çalışan bölüme atabilirsiniz. Alt tarafa eklenen yere tıklayarak kullanılacak yazıları alabiliriz.

Web sayfamıza 2 şekilde entegre edebiliriz. Bir stil dosyasımıza (CSS dosyamıza) @import seçeneği kullanarak bir diğeri de <head> ve </head> tagleri arasına embed ederek. İki seçenekten hangisi size uyarsa onu kullanabilirsiniz.

Türkçe desteği ve font ayarları için öncelikle 2.sekmede bulunan Customize bölümünden font stillerini ve Latin Extended seçeneğini işaretlemeyi unutmayın.

Google Fonts sayfanıza nasıl eklenir?

1. Kullanım Örneği (Sayfada <head> ve </head> arasında)

Örnek

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin-ext" rel="stylesheet">

2. Kullanım Örneği (Sayfada <head> ve </head> arasında)

Örnek

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin-ext');
</style>

3. Kullanım Örneği (Stil Dosyasında)

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin-ext');

Artık fontumuzu sayfaya ekledik. İsterseniz tüm yazılarda isterseniz parça parça yazılarda kullanabiliriz. Örnek olarak tüm sayfanızda aynı fontu kullanmak istiyorsanız aşağıdaki gibi bir css ile kullanabilirsiniz.

body {
font-family: 'Roboto', sans-serif;
font-size:14px;
font-weight:400;
}

Yukarıdakinden farklı olarak belirli bir alanda kullanmak isterseniz yeni bir class yaratıp kullanabiliriz.

.ft-roboto {
font-family: 'Roboto', sans-serif;
font-size:14px;
font-weight:400;
}

Yukarıda .ft-roboto diye bir class yarattık. Artık .ft-roboto class’ını kullanan her yerde font Roboto olacaktır. Bu şekilde linklerde ve istediğiniz bölümlerde kullanabilirsiniz. Aşağıda kullanabileceğiniz bir kaç şekil gösterimi bulunmaktadır.

<div class="ft-roboto">
Ben Roboto fontu ile yazıldım 
</div>
 
<a href="#" class="ft-roboto">
Ben Roboto ile yazılan linkim 
</a>
 
<span class="ft-roboto">
Ben Roboto ile yazılan bölümüm
</span>

Artık Google Fonts’un nasıl kullanıldığını bildiğinize göre hemen kendi sitenize de uyarlayabilirsiniz. İhtiyacınız olan fonta yakın bir font hemen hemen her zaman bulunuyor.

Yazı hakkında ifade bırakmayı unutmayın, aklınızda kalan sorular için yorum yapabilirsiniz.

Emoji ile Tepki Ver

3
0
1
0
0
0

Yorumlar

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration