Google Yazı Tiplerini Google ve Eklentilerle Kullanma Rehberi!

Bir tasarımcıysanız, tipografiyi herhangi bir web sitesi tasarımının temeli olarak görme olasılığınız daha yüksektir. Yalnızca yazı tiplerini seçmekle kalmaz, aynı zamanda web sayfalarının okunabilirliğine de bir avantaj sağlar.

Tipografi Nedir?
Tipografi, satır uzunluğunu, nokta boyutunu, satır aralığını, yazı karakterlerini seçmek ve harf grupları arasındaki boşlukları ayarlamakla ilgilidir.

Google Yazı Tipleri neden net bir seçimdir?
İnternetin, bakan herkesi sıkacak standart yazı tiplerine sahip olduğu zamanlar oldu, ancak zaman geçtikçe, web tasarımcıları ve geliştiricileri, canlı metin yazı tipi seçimlerini sınırlamak ve en fazla sayıda kullanıcıyla uyumlu yazı tiplerini tasarlamak zorunda kaldılar. internet. CSS3 ile geldiler. Typekit başlattı.

Typekit, tasarımcıların web sayfaları için çekici ve kullanıcı dostu yazı tiplerini seçmelerine yardımcı olan bazı cezbedici yazı tiplerini geliştirdi, ancak Typekit'i kullanmanın tek sorunu, kullanıcılarından talep ettikleri maliyetti.

Fiyat 49 dolardı ve bir tasarımcı iki site geliştirmek isterse, sadece web sayfasındaki yazı tiplerini kullanmak için 99 dolar ödemek zorunda kaldı. Harika font tasarımları ile karşımıza çıkan ve ücretsiz olarak sunan Google'a teşekkürler.

Parayla alabileceklerinizi bedavaya alamayacağınız çok açık ama inanın, Google Web Fontları Typekit'in sunduğundan daha fazlasıydı. Elbette, Google Web yazı tipleri, tüm web sitesini oluşturmanın çok fazla maliyeti olduğunu bildiğiniz için yazı tiplerine çok fazla harcamayı sevmediğinizde en iyisidir.

Google Yazı Tipleri ve Özelleştirmeleri:
Bugün itibariyle, Google kitaplığında 647'den fazla yazı tipi ayrı yazı tipi ailesi bulunmaktadır. Web sitenizin içeriği için bir yazı tipi seçerken, onu o yazı tipini nasıl uygulayacağınıza benzer şekilde görüntülemek zorunludur. Bazı yazı tipleri, gövde içeriği için mükemmel görünür ancak başlık olarak korkunçtur.

Neyse ki, Google Web Yazı Tipleri, önizlemenizi kullanım durumunuza uyacak şekilde özelleştirmenize olanak tanır. Özel önizleme metni girebilir ve önizleme boyutunuzu istediğiniz gibi değiştirebilirsiniz. Paragraf görünümünde kullanacağınız herhangi bir üstbilgi veya gövde kopyasını önizlemeniz önemlidir ve çok fazla gövde kopyanız varsa, çok fazla özel yazı tipi kullanmayın.

Doğru Yazı Tipine Yönelik Huni!
Elenmesi gereken altı yüzden fazla yazı tipi ailesini bildiğimiz için, tek tek kaydırarak filtrelemek ve doğru olanı seçmek zorlaşıyor. Bu nedenle, web siteniz için tam olarak neye ihtiyacınız olduğunu öğrenmek için aşağıdaki adımları kullanın:

• Google tarafından yakın zamanda güncellenen yazı tiplerine hızlıca göz atın. Geri kalan yazı tiplerine bakmak zorunda kalmadan trend olan ve hatasız yazı tipini elde etme şansınız var. Ayrıca, çoğu tasarımcı ve geliştirici tarafından kullanılan yazı tiplerine bakın. Bunu yapmak, birden çok stil ve genişlikte kullanabileceğiniz çok yönlü yazı tiplerini tanımanıza olanak tanır.
• Web sitenizin yazı tipini, yazı tiplerinin özelliklerini ve stilini biliyorsanız, el yazısı bir yazı tipi istiyorsanız, diğer tüm sonuç türlerini devre dışı bırakmak gibi sonuçlarınızı iyileştirebilir.
• Google, filtreleme seçenekleri olarak karakterin kalınlığını, eğimini ve genişliğini ekleyerek yazı tipi aramanızı daha da hassaslaştırmanıza olanak tanır. Web siteniz için en iyi yazı tipini elde etmek harika bir özellik değil mi?

Yazı tiplerini seçme
Google, yazı tiplerini bir web sitesi sahibinin ihtiyaçlarına göre seçip uygulamak için çeşitli yöntemlere sahiptir. Burada doğru ya da yanlış bir şey yok. Senin için en iyisi neyse onu alacaksın. Doğru yazı tipini seçmenize yardımcı olacak üç düğmeyi destekler:

• Hızlı Kullanım: Beğendiğiniz yazı tipine hızlıca göz atmak için.
• Pop out: Beğendiğiniz yazı tipi hakkında, yani işlevselliği ve kullanımları hakkında daha fazla bilgi için.
• Koleksiyon: İkiden fazla yazı tipi kullanmak istiyorsanız Koleksiyon, tıklamanız gereken butondur. Beğendiğiniz tüm yazı tiplerini tek bir sayfada ekleyecektir.

Google Yazı Tipleri Nasıl Kullanılır?
Web sayfanızda kullanmak istediğiniz yazı tiplerini seçtikten sonra, bunları çalışırken görmek için “Kullan” sekmesine tıklayabilirsiniz. Şimdi, yazı tipinden emin olduğunuzda, tek ihtiyacınız olan şey basit bir şekilde web sayfanıza bazı kodları kopyalayıp yapıştırmak. Aralarından seçim yapabileceğiniz üç seçenek alacaksınız:

Standart:
Standart bir stil sayfası bağlantısıdır. Bunu HTML dosyanızın baş kısmına yerleştirmeniz gerekir, böylece zaten atılmış olan bir stil sayfasına önemli ölçüde eklerken @import kuralını ekleme adımından tasarruf edersiniz. Örnek:

CSS:
Başlığınızda otomatik olarak oluşturulan stil sayfasına bağlantı vermek istemiyorsanız CSS @import kuralını kullanın. Yazı tiplerini CSS'nize entegre etmek için aşağıdaki kodu kullanın:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google ve Typekit, kullanıcılara yazı tipi yükleme üzerinde daha fazla kontrol sağlamak için bu kodu WebFont yükleyicinin bir parçası olarak burada geliştirdi.

Bir HTML parçacığını alın ve aşağıdaki gibi HTML başlığına yakın bir yere koyun:

Sayfa başlığı

CSS'ye atlayın ve şunu izleyin:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Eklentiler Yardımıyla!
Sorunsuz Google Yazı Tipi entegrasyonu sunan bazı eklentiler mevcuttur. Eklentileri kullanmanın, bir eklentinin HTML veya CSS yardımıyla daha fazla özelleştirme yapmadan belirli bir metni aramayı bilmemesi gibi sınırlamaları vardır. Ancak yine de, Google yazı tiplerini web sitenize dahil etmek için birkaç eklenti var.

1. Yazı Tipi Eklentisi

Yalnızca birkaç tıklamayla Google yazı tiplerini web sitenize yerleştirmenin kolay ve etkili bir yoludur. Stil sayfanızı veya CSS stilini kullanabilirsiniz; her ikisi de onları temanıza uyarlamak için çalışacaktır. Bunu yönetici alanından veya web sitenizin stil sayfasından yapabilirsiniz. Fonts Plugin, web siteniz için hızlı ve verimli bir şekilde ihtiyacınız olan her şeydir.

2. Kolay Google Yazı Tipleri

Easy Google Fonts eklentisi ile yazı tiplerini web sitenize almak için herhangi bir kodlamaya dokunmanıza gerek yok. Seçimden optimize etmeye ve benzersiz renkler sunmaya ve canlı önizlemeye kadar, yazı tipleriyle ilgili her şey Easy Google Fonts kullanılarak yapılabilir.

3. TK Google Yazı Tipleri

TK Google Yazı Tipleri, sayfalar veya gönderiler geliştirirken 291 Google Web yazı tipinin tümünü görsel düzenleyici panelinize ekler. Sadece kurun ve kullanmaya başlayın.

Yukarıdaki Eklentilerin Kurulumu:

• WordPress Yöneticisine Giriş Yapın
• "Eklentiler"e tıklayın
• "Yeni Ekle" ye tıklayın
• Sağ üst köşeye eklenti adını yazın ve “şimdi yükle”ye tıklayın.

Eklentileri Özelleştirmek için

• “Görünüm”e tıklayın ve ardından “Özelleştir”e tıklayın.
• “Siteyi Ziyaret Et”e ve ardından “Özelleştir”e tıklayın
• “Tipografi” olarak eklenen yeni bir menü göreceksiniz

Öğrenmeyi Uygulayın!
Makaleyi okumanın bir öğrenme dersi olduğunu umuyoruz ve şimdi bu bilgiyi web sitenizde kullanmanın zamanı geldi. Web sitelerinizdeki tipografiyi geliştirmek için çeşitli yazı tiplerine ve eklentilere göz atın. Bir yazı tipini özelleştiriyorsanız, yazı tipini kopyalayıp yapıştırmaktan daha faydalı olacağını unutmayın. Projelerinizde hedef kitlenizi cezbetmek için tipografi eklemek için kullandığınız yazı tiplerini ve yöntemleri bize bildirin.

Yazı tipleri, bir web sitesinin estetik biçimini geliştirir ve herhangi bir web sitesi tasarımının temelidir. Yazı tipleri veya tipografi, satır uzunluğunu, nokta boyutunu, satır aralığını, yazı tiplerini seçmek ve grup harfleri arasındaki boşlukları ayarlamakla ilgilidir.

Bir tasarımcı olarak, filtreleme seçenekleri olarak karakterin kalınlığını, eğimini ve genişliğini ekleyerek yazı tipi aramanızı daha da hassaslaştırmak her zaman iyidir. Tüm yazı tipleri gövdede ve/veya başlık içeriğinde iyi görünmez.

Bazı yazı tipleri başlık olarak iyi görünmüyor ve diğerleri gövde içeriğinde kolayca okunamıyor. Bu nedenle, okunabilirliğini test edebilmeniz için seçtiğiniz yazı tipini, onu nasıl uygulayacağınıza benzer bir şekilde görüntülemeniz önerilir.

İnternetin aynı eski sıkıcı standart yazı tiplerine sahip olduğu günler geride kaldı. İleri teknoloji ve web tasarımcıları ve geliştiricileri, internet üzerinden en fazla sayıda kullanıcıyla uyumlu yazı tipleri tasarlamaya zorlandı.

CSS3 ile geldiler. Typekit bunu başlattı ve web tasarımcılarının kullanması için bazı cezbedici ve çekici yazı tiplerini geliştirdi. Ancak çok pahalıya patladılar. Neyse ki, Google kurtarmaya geldi ve mükemmel, kullanıcı dostu yazı tipi tasarımlarını ücretsiz olarak sundu.

Doğru Yazı Tipine Yönelik Huni!

Şu anda, google kitaplığındaki yazı tipi sayısı 647'dir ve bu da filtrelemeyi ve doğru olanı seçmeyi zorlaştırır. Ancak bu 3 adımla, web siteniz için tam olarak ihtiyacınız olanı elde edebilirsiniz:

• Google'da en son güncellenen yazı tiplerine bir göz atın ve trend olan ve hatasız bir yazı tipi elde edin. Ayrıca, birden çok stil ve genişlikte kullanabileceğiniz yazı tiplerinin çok yönlülüğü hakkında bilgi sahibi olmanızı sağlamak için tasarımcıların çoğunluğu tarafından kullanılan yazı tiplerine bakın.
• Sonuçlarınızı iyileştirmek için web sitenizin yazı tipini, yazı tiplerinin özelliklerini ve stilini öğrenin.
• Filtreleme seçeneği olarak karakterin kalınlığını, eğimini ve genişliğini ekleyerek yazı tipi aramanızı hassaslaştırın.

Yazı Tiplerini Seçme

İhtiyaçlarınıza bağlı olarak, Google'ın bir yazı tipi seçmenize yardımcı olacak birkaç yöntemi vardır. Doğru yazı tipini seçmek için şunları göz önünde bulundurun:

Hızlı erişim-Beğendiğiniz yazı tipine hızlıca göz atmak için

Pop Out- Yazı tipi, yani işlevsellik ve kullanımlar hakkında daha fazla bilgi için

Koleksiyon-İkiden fazla yazı tipi kullanmak istiyorsanız bu butona tıklayın. Beğendiğiniz tüm yazı tiplerini tek bir sayfada ekleyecektir.

Google Yazı Tipleri Nasıl Kullanılır

Tercih ettiğiniz yazı tipini seçtikten sonra, onları çalışırken görmek için 'Kullan' sekmesine tıklayın. Ardından, web sayfanıza bir kod kopyalayıp yapıştırın. Aralarından seçim yapabileceğiniz üç seçenek alacaksınız:

Standart -Bu standart bir stil sayfası bağlantısıdır. HTML dosyanızın baş kısmına yerleştirin. Zaten sahip olan bir stil sayfasına önemli ölçüde eklerken @import kuralını ekleme adımından sizi kurtaracaktır.

CSS -Başlığınızda otomatik olarak oluşturulan stil sayfasına bağlantı vermek istemiyorsanız CSS @import kuralını kullanın . Yazı tiplerini CSS'nize entegre etmek için aşağıdaki kodu kullanın:

yazı tipi ailesi: 'Henry Pigeous', serif;
yazı tipi ailesi: 'Diplomatik'. el yazısı;

JavaScript -Google ve Typekit, kullanıcılara yazı tipi yükleme üzerinde daha fazla kontrol sağlamak için bu kodu Web Font yükleyicisinin bir parçası olarak burada geliştirdi .

Bir HTML parçacığını alın ve aşağıdaki gibi HTML başlığına yakın bir yere koyun:

Sayfa başlığı

CSS'ye atlayın ve şunu izleyin:

h1 {

yazı tipi: 400 45px/0.5 'Diplomatik', Arial, sans-serif;

}

P {

yazı tipi: 400 14 piksel/1.5 'Henry Pegasus', Times, serif;

}

Yazar hakkında:
Catherrine Garcia, Hosting Facts'te deneyimli bir Web Geliştiricisi ve tutkulu bir blog yazarıdır. Web geliştirme ve WordPress hakkındaki makaleleri aracılığıyla bilgisini paylaşmayı seviyor.