Blog Sitelerine Google Fontları Ekleme ve Değiştirme

30.5.17
Blog Sitelerine Google Fontları Ekleme ve Değiştirme

Blog Sitelerine Google Fontları Ekleme ve Değiştirme - Bu yazımızda Blogger siterine Google Fontları ekleme veya kullanılan fontları değiştirme ile ilgili bilgileri paylaşacağız. Blog veya web sitelerine ve içeriklerine farklı kişilik kazandırmanın en önemli yolunun iyi tasarım ve teknoloji ile olduğunu biliyoruz. Burada amaç açık kaynakları kullanarak web yazı tiplerine bir tipografi entegre ederek yazı tiplerinin sezgisel ve dizin durumunu değiştirebilirsiniz.

Google Fontları 135 dilde test edilmiş tipografi dizinleridir. Google Fonts sayfasında bulunan tematik koleksiyon serilerini incaleyerek blogunuza uygun olan, Google ekibi tarafından organize edilmiş yeni yazı tiplerini keşfedebilirsiniz. Ayrıca filtreleme seçeneğini kullanarak blogunuz için tamamen özelleştirilmiş yazı koleksiyonu oluşturabilirsiniz.

Neden Google Fontları Tercih Edilmeli?


Google yazı ürünleri blog kullanıcılarının gizliliği ve güvenliği konusundan ödün vermeden daha hızlı ve güvenli önbelleğe alınmasını sağlar. Google yazı tiplerini kullanan başka web sitesinde önbelleğe alınmış yazı tiplerini, siteler arası önbelleğe alma özelliği sayesinde tekrar yüklenmesine gerek kalmadan doğrudan kullanılmasını sağlayarak bant genişliği ve bağlantı sorununu ortadan kaldırır.

Google Fontları Blog Sitesine Nasıl Eklenir?


Google Fonts sayfasına giderek blogunuza uygun font veya fontları seçerek blogunuzun için bir font koleksiyonu oluşturun. Blogunuzda kullanabileceğiniz fontlar haricinde fazladan seçmemeye dikkat edin. Oluşturduğunuz font koleksiyonu embed kodu aşağıdaki gibidir. Oluşturduğunuz kodu blogunuzun şablon kodları arasında bulunan </head> kodunun bir satır üzerine eklemelisiniz.

<link href="https://fonts.googleapis.com/css?family=Barrio|Roboto" rel="stylesheet"/>

Eğer blogunuzun şablon kodları arasında zaten bir Google font kodu bulunuyorsa oluşturduğunuz kodu mevcut kod ile değiştirin.

Google fonts sayfasında oluşturduğunuz koleksiyonlara ait CSS belirtme kodlarını da blogunuzun şablon kodları arasına eklemelisiniz.

font-family: 'Roboto', sans-serif;
font-family: 'Barrio', cursive;

Blog sayfalarınıza Google Fonts yazı tipi eklemek için aşağıdaki örnekten faydalanabilirsiniz. Yapmanız gereken tek şey, blog şablon kodları arasına bir stil bağlantısı eklemek ve daha sonra bir CSS stil dosyasına font CSS kodlarını eklemek.

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Barrio', cursive;
}
</style>
</head>
<body>
<div>Blog Sayfalarını Güzelleştirin!</div>
</body>
</html>

Örnekte olduğu gibi blogunuza font koleksiyonunu ekledikten sonra web tarayıcınızda blogunuzun herhangi bir sayfasını açarak eklemiş olduğunuz fontların yazı sitilleri nasıl değiştirdiğini görebilirsiniz. Blogunuzda başlıklar, body içerisindeki yazı, kısa açıklamalar ve butonlar için farklı yazı sitilleri kullanmak istiyorsanız eklediğiniz Google font bağlantısına ait CSS kodlarını başlıklar, body içerisindeki yazı, kısa açıklamalar ve butonların sitil dosyalarında bulunan CSS satır aralığına ekleyerek değiştirebilirsiniz.

Bu yazımızda Blogger sitelerine Google Fonts dosyalarının nasıl eklendiği ile ilgili bilgiler paylaştık. Yayınımız ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.

Yorum Gönder