Yenilenen Google Fonts ve Blogger'da Kullanımı

Google Fonts rehberi ve Blogger'a nasıl yüklendiğini anlatan yazı.

Yenilenen Google Fonts ve Blogger'da Kullanımı

Geçtiğimiz hafta Google bir güncelleme yaparak, Google Fonts tasarımını ve içeriğini yeniledi. Sizlere bu yazımda yeni gelen özelliklerden ve nasıl kullanıldığından bahsedeceğim ki, kimse konuya yabancı kalmasın. Sizler de istediğiniz fontu kullanabilesiniz. Ufak bir tanımla sizlere Google Fonts'u anlatayım hemen.

Google Fonts, ücretsiz olarak yazı tipleri sunan ve sürekli güncellenen bir Google'ın servisidir. Bu sayede web sitelerinde ve bloglarda ücretsiz olarak font kullanabilme imkanı sağlıyor. Ayrıca web siteleri veya bloglardan hariç, fotoğraf düzenleme uygulamalarında ve bilgisayarlarda kullanılabiliyor. Yüzlerce font arasından istediğinizi ücretsiz olarak indirebilir ve istediğiniz yerde kullanabilirsiniz.

Tırnaklı, tırnaksız, bitişik yazı, el yazısı gibi birçok yazı tipi seçeneğini bulabileceğiniz bu servise bir de yakından bakalım.

Yenilenen Google Fonts ve Blogger'da Kullanımı

Yukarıdaki görsel, yenilenen Google Fonts'un yeni tasarımı. Göze hoş gelen animasyonları ve görüntüsüyle Material Design'ı benimseyen bu servis (ki Material Design=Google) daha kullanışlı hale gelmiş. Ana sayfada yazı fontlarının ismi ve nasıl göründüğü ile ilgili ufak bir demo var. Ayrıca hemen sağ üstlerinde bulunan "+" tuşlarına tıklayarak kaydedebiliyoruz.


Yukarıdaki menüye gelecek olursak;

DIRECTORY: Bu kısımda sağ taraftan seçtiğiniz özellikteki yazılar gözükür.
FEATURED: Son zamanların popüler yazı fontlarını gösterir.
ABOUT: Google Fonts hakkında bilgiler. (Aman çok da şey yapmamak lazım neyden bahsettiğini ben de anlamadım :D)
BOYA İKONU: Google Fonts görünümünü değiştirmeye yarar. Görünümü derken sadece renkleri kast ettim. 

ve son olarak "Search" kısmı, aramak istediğiniz fontu yazarak hızlı bir şekilde bulmaya yarar. (tabi Google'da varsa)


Yukarıdaki menüye baktık, yan tarafa da haksızlık etmeyelim değil mi?

Categories kısmında bulunan seçenekler, yazınızın şekli ile alakalı. Şimdi şekillere ve oradaki terimlerin anlamlarına bakalım da yetim kalmasınlar.

Serif: Tırnaklı yazı tipi. Örneğin "Times New Roman"
Sans Serif: Tırnaksız yazı tipi. Örneğin "Open Sans"
Display: Ne işe yaradığını hala anlamadım ama bu tipteki yazıların harflerinde ufak detay ve değişiklikler var.
Handwritting: Diyelim biz elimize kalem kağıt aldık ve yazı yazdık. Ha işte bu tipteki yazıları da öyle düşünün.
Monospace: Harflerin araları eşit bir şekilde aralıklı ve harfler arasında alışageldiğimizden biraz daha farklı bir mesafe var.
Sorting: Yazı tiplerini alfabetik, popüler, tarihe göre vs. sıralıyor.
Language: Latin alfabesinden farklı alfabeleri de seçmemize olanak sağlar.

Ayrıca alt kısımdaki seçenekler, yazının şekliyle alakalı işte siz anlarsınız.

Blogger'da Nasıl Kullanırım?

Nasıl kullanacağınıza başlamadan öncesi şunu da ipucu olarak söyleyeyim; Font isimlerinin üzerine tıkladığınızda, font ile ilgili detaylı bilgiye, diğer fontlarla karşılaştırılmasına ve kullanım yüzdelerine erişebilirsiniz, meraklısına!

Her neyse ben çok uzattım. Hızlıca yenilenen Google Fonts üzerinden Blogger'a font yüklemeyi anlatayım.

  • Öncelikle istediğimiz herhangi bir fontun yanındaki "+" butonuna tıklayınız ve bu tıklama işlemi sonucunda aşağıdaki gibi ekran görüntüsü gelecektir.

  • İşte burada 1 Family Selected yazısına tıklayın ve aşağıdaki ekran görüntüsüne ulaşın.

  • Gelen ekrandaki @IMPORT seçeneğine tıklayın ve aşağıdaki ekran görüntüsündeki seçtiğim kodu kopyalayın.

  • Daha sonra Blogger panelinden Şablon ve HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların üzerine bir kez tıklayıp Ctrl+F tuşlarına tıklayın. Gelen arama yerine ise <head> yazıp Enter tuşuna tıklayın.
  • <head> kodunun bir alt satırına kopyalamış olduğunuz kodu yapıştırın.
  • Son olarak kodların bulunduğu alana bir kez tıklayıp, Ctrl+F tuşlarına tıklayın. Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunun bir üst satırına aşağıda vermiş olduğum kodu yapıştırın. Fakat şunu unutmayın ki, aşağıdaki kod içerisinde bulunan Font Adı kısmına yüklemek istediğiniz fontun adını yazın.
[* {
    font-family: 'Font Adı', sans-serif;
} ]

Eğer son maddedeki işlem olmadıysa, HTML'yi düzenle kısmındaki font isimlerini kullanmak istediğiniz fontun ismiyle değiştirip kaydedin, kesinlikle hallolacaktır.


Son Sözler

Yani anladık ki Google Blogger'da olmasa da Google Fonts üzerinde güzel bir yenilik yapmış. Gerek tasarım, gerekse de içerik olsun neredeyse kusursuz. Tek eksiği Türkçe desteği olmaması. Ama bir gün o da olur diye ümit ediyorum. Her neyse benim sizlere sorum, sizlerin favori fontunuz hangisidir?

Yorumlar

Blogger: 8
  1. Google her daim kendini güncelliyor. Benim de dikkatimi çekmişti bu değişiklik arama açısından daha kolay ve kullanışlı olmuş. Bloggerde de değişiklik oluyor şu sıralar ama yazarlar fark ediyor mu bilemiyorum. Bilgi için teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Blogger'da olan değişiklikler hiçbir işe yaramıyor sanırım ve bize fark ettirmiyorlar. Kesinlikle daha kullanışlı olmuş.

      Sil
  2. Bilgi için teşekkürler.Demek ki google da güncelleme yapabiliyormuş bazı alanlarda blogger için de bir güncelleme bekliyoruz tabi.

    YanıtlaSil
    Yanıtlar
    1. Google diğer servislerinde güncellemeyi eksik etmiyor. Bir Blogger'ı yetim bıraktılar. Ben de aynı bekleyiş içerisindeyim.

      Sil
  3. Ben '']]/b:skin>'' bu kodu yazdığımda bulamıyorum. Ne yapmam gerek?

    YanıtlaSil
    Yanıtlar
    1. Kusura bakmayın, benim hatam. Kodun doğrusu "]]>" olacaktı, dalgınlığımdan yanlış yazmışım, düzeltiyorum hemen.

      Sil
    2. Yorum kısmında nedense çıkmadı, yazı içerisinden doğrusunu güncelliyorum.

      Sil
  4. Bu yorum yazar tarafından silindi.

    YanıtlaSil

Ad

1. Cilt,1,100,1,1080P,1,11.22.63,1,12 Kızgın Adam,1,2018,1,4. Sezon,1,44. Çocuk,1,A Thousand Kisses Deep,1,Aksiyon Filmleri,3,Alcatraz'dan Kaçış,1,Alexa,2,Amelie,1,Analiz,1,Android,14,Android Haberleri,1,Android İpuçları,2,Android Uygulamaları,10,Animasyonlu İndirme Butonu,1,Anket,1,Antonio Banderas,1,Antremanlarla Matematik,1,Apk,2,Apk İndir,2,Arama Açıklaması,1,Arama Motorları,1,Araştırma,1,Arı,1,Ayrton Senna,1,Bana Dair,76,Base,1,Başarı,1,Başlık Efekt,1,Blog,2,Blog Keşif Etkinliği,1,Blog Nasıl Açılır?,1,Blogger,58,Blogger Eklentileri,18,Blogger Eklentisi,1,blogger haberleri,1,Blogger İpuçları,18,Blogger İstatistikler Widget'ı,1,Blogger Nedir,1,Blogger Sayfa Kaydırma Efekti,1,Blogger Sorunları,1,Blogger Tavsiyeleri,1,Blogger Temaları,6,Blogger Widget'ları,7,Blogger Yedekleme,1,Boks,1,Buton,2,camera,1,Can Dostum,1,Checker Gmail,1,Child 44,1,Chroma Keyboard,1,Cillian Murphy,1,Clev Note,1,CSS,2,Deadpool,1,Deadpool İndir,1,Diğer Kategoriler,10,Dinlediklerim,5,Dives İkon,1,Dizi,1,Dizi Replikleri,1,Drama Filmleri,3,Drop Caps,1,Duvar Kağıtları,1,Düşünce,1,Editörün Seçtikleri,4,Eklenti,2,Elementary,1,Etkileşim,1,Etkinlik,1,exi2.net,1,Fabrizio De André,1,Facebook,1,Film,6,Film İncelemesi,1,Film Puanlama,1,Film Replikleri,2,Filmler,6,First Character,1,First Letter,1,Flat İcon,1,Font,1,Forever,1,Formula 1,1,Forrest Gump,2,Frank Sinatra,1,Fringe,3,Galeri,5,Gary Oldman,1,Geçmişin Gölgesinde,2,Gerilim Filmleri,2,GetSiteControl,2,Google,2,Google Chrome,2,Google Fonts,1,Google Friend Connect,1,Google Plus,1,Google+,1,Google+ Toplulukları,1,Görsel,2,Guadalupe Pineda,1,Hayal Gücü Yüksek Sorular,1,Hayat ve Düşünce,1,Historia De Un Amor,1,HTML,2,Hugh Jackman,1,Instagram,1,Intoucheables,1,İcon,1,İkon Paketleri,1,İndex,1,İndir,4,İndirme Butonu,1,İnfografik,1,İstatistikler,1,İzlediklerim,20,Kalıcı Bağlantı,1,Kaliteli Blogger Eklentileri,1,Kaptan Amerika Kahramanların Savaşı,1,Kim Bu Semih,1,Kimdir,1,Kingsman: Gizli Servis,1,Kişisel Blog,9,Kişisel Yazılar,43,Kitap,1,Kullandıklarım,5,Launcher,1,Leonard Cohen,1,Logan,1,Logo Efekt,1,Lost in Translation,1,Material,2,Material Design,3,MeloCloud+ Music Player,1,Meta Açıklaması,1,Mijia Quartz Watch,1,Mim,10,Minimal Design,1,Mobil,2,Mobil Uyumlu Blogger Temaları,1,Muhammad Ali,1,Muhammad Ali Sözleri,1,Muhammad Ali'nin Hayatı,1,Müzik,7,Müzisyen,1,Nah Neh Nah,1,Nasıl Yapılır,5,Nasıl Yapılır?,3,Nedir,3,OGInstagram,1,Okuduklarım,2,Osmia Avosetta,1,Önemi,1,Öp Evlen Uçurumdan At,1,Özel Başlık Etiketleri,1,Paris'te Gece Yarısı,1,Paylaşım,1,PC,2,PC Uygulamaları,1,Peaky Blinders,2,Peppino Gagliardi,1,Pocket,1,Popüler Yayınlar,1,Radiogram,1,Radyo,1,Renato Carosone,1,Replikler,2,Repo Men,1,Resim ve Video,1,Resimli İndirme Butonu,1,Responsive,2,Robots txt,1,Rodrigo Amarante,1,Romantik Filmler,1,Root,2,Satın Aldıklarım,1,Schindler'in Listesi,2,Scroll Smooth,1,SEO,3,SEO Ayarları,1,Shareaholic,1,Shareit,2,Sherlock,3,Sherlock Holmes,1,Sıralama,1,Sinema,1,Site Haritası,1,Social Meter,1,Sosyal Medya,2,Soundcloud,1,Sözler,1,Spor,1,Sting,1,Tasarım,1,Tavsiyelerim,1,Teknoloji,1,Tema,1,Template Clue,1,The Blacklist,1,The Mentalist,2,The Mentalist Replikleri,1,The Pianist,1,Tom Hardy,2,Tozlu ve Yıkık Blog,1,True Detective,2,Tuyo,1,TVShow Time,2,Uygulama,1,Ücretsiz İkon,1,Üst Sıralara Çıkmak,1,Vaya Con Dios,1,Video,2,Videolar,1,Website,1,WhatFont,1,Woorank,1,Word Count,1,Wordpress,1,Xiaomi,1,Yabancı Diziler,9,Yabancı Radyo,1,Yardımlaşma,1,Yayın Ayarları,1,Yaz Tatili,1,Yazar Olmak,1,Yazı,2,Yazı Kutusu,1,Yazı Yazmak,1,Yıl Dönümü,1,Yıldız Sıralamalı,1,Yıldızlararası,1,Youtube,1,Ziyaretçi Trafiği,1,
ltr
item
Semih Keçecioğlu - Kişisel Blog: Yenilenen Google Fonts ve Blogger'da Kullanımı
Yenilenen Google Fonts ve Blogger'da Kullanımı
Google Fonts rehberi ve Blogger'a nasıl yüklendiğini anlatan yazı.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnP11dZty4ogtvxdicVGziwrXdZ1wIP5Yy8WofMrMClJn7J6G7dX0faLVaBhvz3RVQ0ebf_72bTBt-Z6N2C5g_NHAm2UuXqXkS-11ZVR-zfLgcUBRBpmnkSywAlaUfPcAkbnrWljzy2I/s640/Yenilenen+Google+Fonts+ve+Blogger%2527da+Kullan%25C4%25B1m%25C4%25B1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnP11dZty4ogtvxdicVGziwrXdZ1wIP5Yy8WofMrMClJn7J6G7dX0faLVaBhvz3RVQ0ebf_72bTBt-Z6N2C5g_NHAm2UuXqXkS-11ZVR-zfLgcUBRBpmnkSywAlaUfPcAkbnrWljzy2I/s72-c/Yenilenen+Google+Fonts+ve+Blogger%2527da+Kullan%25C4%25B1m%25C4%25B1.png
Semih Keçecioğlu - Kişisel Blog
https://semihkececioglu.blogspot.com/2016/09/yenilenen-google-fonts-ve-bloggerda-kullanimi.html
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/2016/09/yenilenen-google-fonts-ve-bloggerda-kullanimi.html
true
3247702708061337910
UTF-8
Tüm yazılar yüklendi. Hiçbir yazı bulunamadı. Tümünü Gör Devamını Oku Yanıtla Yanıtlamaktan Vazgeç Sil Yazan: Ana Sayfa Sayfalar Yazılar Tümünü Gör BENZER YAZILAR Etiket Arşiv Ara Tüm Yazılar Bulunamadı Geri Ana Sayfa Pazar Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Paz Pzt Sal Çar Per Cum Cmt Ocak Şubat Mart Nisas Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık Oca Şub Mar Nis Mayıs Haz Tem Ağu Eyl Eki Kas Ara şimdi 1 dakika önce $$1$$ minutes ago 1 saat önce $$1$$ hours ago Dün $$1$$ days ago $$1$$ weeks ago 5 haftadan uzun bir süre önce Takipçiler Takip Et Premium STEP 1: Share to a social network STEP 2: Click the link on your social network Tüm kodları kopyala Tüm kodları seç Tüm kodlar kopyalandı Çalışmazsa CTRL+C kombinasyonunu kullan Table of Content