Google Fontları WordPress ile Nasıl Kullanılır?

Modern web tamamen kullanıcı deneyimi ile ilgilidir. Şirketler, web sitelerinin ziyaretçilerinin web sitelerinde gezinirken en iyi deneyimi elde etmelerini sağlamak için büyük miktarda zaman ve para yatırır.

Metin gösterimi, web sitesinin estetiğinde ayrılmaz bir rol oynar. İçeriğinizin kalitesinin ne kadar iyi olduğu önemli değil; Okumak hoş değilse ve okuyucular için çok karmaşıksa, tüm çabalarınız boşa gider.

Kullanabileceğiniz çok sayıda tipografik seçenek olmasına rağmen, yüzlerce profesyonel yazı tipine (ücretsiz) erişmenin en kolay yolu, WordPress web sitenizle Google Yazı Tiplerini kullanmaktır.

Bu yazıda, WordPress Google yazı tiplerini web sitenize manuel olarak ve Easy Google Fonts eklentisini kullanarak nasıl ekleyeceğinizi öğrenmek için adım adım talimatlar sunacağım. Ayrıca, web sitenizin içeriğinin okunabilirliğini artırmak için kullanabileceğiniz en iyi yazı tiplerini de göstereceğim.

1- WordPress Google Yazı Tipleri Nedir ve Neden Bunları Kullanmalısınız?

Başlamadan önce , Google Yazı Tiplerinin ne olduğuna ve bunları WordPress web sitenizde kullanmanın temel avantajlarına hızlıca bir göz atalım.

Google Fonts , 2010'da başlatılan libre lisanslı fontlardan oluşan bir kitaplıktır. Sağlanan API'yi arayarak harika Google Fonts kitaplığını kullanabilirsiniz. İlginç olan, web için optimize edilmiş 877 yazı tipini ücretsiz olarak kullanabilmenizdir. Bu inanılmaz. Belirli yazı tiplerini aramanıza ve bunları web tarayıcınızda test etmenize olanak tanıyan etkileşimli bir web dizini içerir.

WordPress Google Yazı Tiplerini kullanmanın bir takım avantajları vardır. Ücretsizdirler (ticari projeler için bile), önceden barındırılırlar (böylece sunucunuzun kaynaklarını almazlar) ve indirilebilirler (basılı olarak kullanabilirsiniz).

Şu anda WordPress'te Google Yazı Tiplerini kendi avantajları için kullanan çok sayıda web sitesi var. Tüm modern temalar, Google Yazı Tiplerinin kullanımını destekler.

Sitenizin tipografisini kullanımı kolay web yazı tipleriyle yenilemeye hazırsanız, tek yapmanız gereken doğru yazı tiplerini bulmak ve bunları WordPress web sitenizde kullanmak.

2- WordPress'e Manuel Olarak Google Yazı Tipleri Nasıl Eklenir

Google Fonts, font ailelerini web sitenize gömmenin ağır yükünün çoğunu alır. Bu, diğer herhangi bir JS veya CSS betiği gibi herhangi bir web projesinde çağrılabilen çevrimiçi bir kitaplıktır.

Bu bölümde, bir WordPress web sitesine Google Fonts'u manuel olarak nasıl kuracağınızı göstereceğim.

1. Adım: Web Sitenize Eklemek İstediğiniz Yazı Tipini Bulun

Başlamak için Google Fonts dizinine göz atın ve WordPress web sitenizde kullanmak istediğiniz yazı tipini seçin. Zaten belirli bir yazı tipiniz varsa, sağ kenar çubuğundaki arama kutusunu kullanarak onu arayabilirsiniz.

Ayrıca yazı tiplerini kategoriye, dillere, stil sayısına, kalınlığa, eğime ve genişliğe göre filtreleyebilir veya eklendikleri tarihe, alfabetik olarak, trendlere veya popülerliğe göre sıralayabilirsiniz.

• Bunlar, harf vuruşlarının sonuna küçük çizgiler eklenmiş yazı tipleridir, örneğin Times New Roman ve Courier .
• Sans Serif. Harf vuruşlarının sonunda küçük çizgileri olmayan yazı tipleri sans-serif yazı tipleridir, örneğin Helvetica ve Roboto .
• Ekran yazı tipleri öncelikle büyük metinler, örneğin başlıklar için kullanılır.
• El yazısı görünümüne sahip yazı tipleri, örneğin Pacifico .
• Tüm karakterlere tam olarak aynı boşluk bırakan yazı tipleri, örneğin Source Code Pro .

Google Fonts'un etkileşimli dizin özelliğini kullanmanın en iyi avantajlarından biri, ilgilendiğiniz yazı tiplerini hızlı bir şekilde önizleyebilmenizdir. Tek yapmanız gereken yazı tipinin alan kutusuna tıklayıp içindeki metni yazmaktır.

Bu eğitimin amacı için Open Sans ile gideceğim.

2. Adım: Yazı Tiplerini Seçiminize Ekleyin

Artık hangi fontla gideceğimizi öğrendiğimize göre onu da seçimimize ekleyelim. Bunu, yazı tipi ailesi kutusunun sağ üst köşesindeki artı işaretine (+) tıklayarak yapabilirsiniz.

Seçiminize istediğiniz kadar yazı tipi ailesi ekleyebilirsiniz. Hazır olduğunuzda, seçiminizi görüntülemek için ekranın altındaki siyah X Family Selected çubuğuna tıklayın.

3. Adım: Yazı Tipini Özelleştirin

X Family Selected çubuğu iki sekmeli bir pencere açar – Embed ve Customize . Yazı tipi ailesini WordPress web sitemize yerleştirmeden önce, biraz özelleştirmek için biraz zaman ayıracağız.

Özelleştir ekranından, web sitenizde kullanmak istediğiniz stiller ve diller için kutuları işaretleyin.

Ne kadar çok yazı tipi stili ve dili seçerseniz sitenizin sayfalarının yüklenmesinin o kadar uzun süreceğini unutmayın. Aynı ekranda, seçiminizin yükleme sürelerini yavaşlatıp yavaşlatmayacağını size bildiren bir Yükleme Süresi göstergesi göreceksiniz.

Yazı tipi seçimimizin sitemizin sayfa yükleme sürelerini etkilememesi için basit bir seçim yapmaya karar verdik - hafif 300 ve normal 400 .

4. Adım: Google Yazı Tiplerini WordPress Web Sitenize Yerleştirin

WordPress'e özel bir yazı tipi eklemenin birkaç yolu vardır. WordPress web siteleri için önerilen yaklaşım olduğundan, wp_enqueue_style() işlevini kullanarak bunu nasıl yapacağınızı göstereceğiz.

Göm sekmesine geri dönerek başlayın ve yazı tipi seçiminizin bağlantısını (URL) panonuza kopyalayın. Bizim durumumuzda tam URL şudur: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Ardından, WordPress panonuza giriş yapın ve Görünüm içinde Editör'e gidin ve bir FTP istemcisi kullanarak aktif temanızın functions.php dosyasını açın ve aşağıdaki kodu ona ekleyin.

 function add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action('wp_enqueue_scripts', 'add_google_fonts');

Not: URL'yi kendi URL'nizle değiştirmeniz gerekecektir.

Temanızın tipografi seçeneklerini (destekliyorsa) kullanarak veya etkin temanızın ana stil sayfasına bir kod ekleyerek yeni eklediğiniz yazı tipini kullanmaya başlayabilirsiniz. Örneğin, tüm H2 başlıklarını yeni yazı tipimizle değiştirmek istersek, kodumuz şöyle görünebilir:

 h2 {

yazı tipi ailesi: 'Açık Sans', sans-serif;

}

WordPress'imi Google Fonts ile başarıyla yükselttim. Google Fonts'un bazı garip sebeplerden dolayı çalışmaması ve yedek olarak görüntülenebilen varsayılan font setine başvurmak zorunda kalmam olasıdır. Ancak bu oldukça nadiren olur.

SEO ve UX için Hız Neden Önemlidir?

Bu uzman ipuçları, WordPress Web Sitelerinizin hızını nasıl artıracağınızı gösterecektir.

Cloudways Hizmet Koşullarını ve Gizlilik Politikasını kabul ediyorum

E-Kitabı Şimdi Alın!

Teşekkürler

E-kitabınız Gelen Kutunuza Gidiyor.

Bunu yapmak için Georgia, Cambria veya Courier gibi yerel olarak barındırılan varsayılan yazı tiplerinizi eklemeniz yeterlidir.

3- Bir Eklenti Kullanarak WordPress'e Google Yazı Tipleri Nasıl Eklenir

Bazıları için WordPress Google Yazı Tiplerinin manuel entegrasyonu bir seçenek olmayabilir. Merak etme. WordPress web sitenize Google Yazı Tiplerini eklemenin başka (daha basit) bir yolu var. Bir eklenti aracılığıyla.

Bu bölümde, Easy Google Fonts eklentisini kullanarak Google Fonts'u WordPress'e nasıl entegre edebileceğinizi göstereceğim.

Adım 1: Eklentiyi Kurun ve Etkinleştirin

WordPress yönetici panelinize giriş yapın ve Eklentiler > Yeni Ekle seçeneğine gidin. Easy Google Fonts'u arayın ve web sitenize yükleyin.

Eklenti yüklendikten sonra, kullanmaya başlamak için Etkinleştir düğmesine tıklayın.

2. Adım: Google Yazı Tiplerini Kullanmaya Başlayın

Eklentiyi web sitenizde etkinleştirdiğinizde, kullanmayı seçtiğiniz Google Yazı Tipleri için stil sayfalarını otomatik olarak sıraya koyar. Başlamak için WordPress yönetici panelinden Görünüm > Özelleştir'e gidin .

WordPress Özelleştiriciye Tipografi adlı yeni bir menü öğesinin eklendiğini fark edeceksiniz.

Paragraflarınızın ve çeşitli başlıklarınızın (H1 - H6) tipografi ayarlarını kontrol etmenizi sağlar.

Web sitenizdeki Paragraflar yazı tipini düzenlemek istediğinizi varsayalım, Kolay Google Yazı Tipleri eklentisi, stillerini, görünümünü ve konumunu özelleştirmenize olanak tanır. Sahip olduğu farklı stil seçeneklerine bir göz atalım.

Stiller sekmesinde, komut dosyanızı, yazı tipi ailesini, yazı tipi ağırlığını, metin dekorasyonunu ve metin dönüştürmeyi yapılandırabilirsiniz. Yazı tipi ailesi seçeneği, Standart Web Yazı Tipleri , Google Serif Yazı Tipleri , Google Sans Serif Yazı Tipleri , Google Ekran Yazı Tipleri , Google El Yazısı Yazı Tipleri ve Google Monospace Yazı Tipleri olarak sınıflandırılan yüzlerce Google Yazı Tipine erişmenizi sağlar.

Bu nedenle, Open Sans kullanmak istiyorsak, script seçeneğini Latin olarak , font ailesi seçeneğini Open Sans olarak ve yazı tipi ağırlığını Regular olarak ayarlardık (bu, Normal 400'ün eşdeğeridir).

Önizleme ekranında yazı tipinin nasıl değiştiğini kontrol edin. Easy Google Fonts eklentisini kullanmanın en büyük yararlarından biri, kullanacağınız yazı tipini seçerken yayınlarınızın ve sayfalarınızın nasıl göründüğünü canlı olarak önizleyebilmenizdir.

4- Kullanılacak En İyi Yazı Tipleri

Google Fonts ile yazı tipi seçimi söz konusu olduğunda gökyüzü sınırdır. Bir web yöneticisi olarak, okuyucularınız için uygun gördüğünüz yazı tipini seçme özgürlüğüne sahipsiniz. Ancak, okunabilirlik açısından popüler olan bazı yazı tipleri vardır.

Yaygın olarak kullanılan ve en iyi okunabilirliği sağlayan en iyi Google Yazı Tiplerine bakalım.

1. Lora

Lora, okunabilirliği ve varyantları nedeniyle yaygın olarak kullanılan font ailelerinden biridir.

2. Oyun Fuarı Teşhiri

Bu yazı tipi ailesi, metnin daha iyi okunabilmesini sağlar ve hem web hem de baskı için uygundur.

3. Arşiv

Bu font, grotesk sans serif font ailesine aittir. Gövde metnine uygun temiz bir görünüme sahiptir.

4. Robot

Roboto, modern web'de en yaygın kullanılan yazı tiplerinden biridir. Minimal web tasarımları ile harika görünür ve kullanıcılara mükemmel okunabilirlik sağlar.

5. Montserrat

Montserrat, yirminci yüzyılın kentsel tipografisinde köklere sahiptir. Bir dizi varyantla birlikte gelen çok popüler bir başka yazı tipi ailesi.

6. Rubik

Çok temiz Rubik, dünya çapında 470.000'den fazla web sitesine hizmet veren bir san serif yazı tipi ailesidir.

7. Kaynak Sans

Google Fonts API aracılığıyla 4,18 milyardan fazla yinelemeye sahip olduğu için Source Sans yazı tipi ailesini kullanmış olmalısınız.

8. Lato

Lato ayrıca Sans Serif yazı tipidir ve web yöneticileri tarafından profesyonel ve net yazı tipi olarak kabul edilir. İçeriğin hemen hemen her pozisyonunda kullanılır.

9. PT Şerifi

Bu yazı tipini kullanan bir milyondan fazla web sitesi ile PT Serif, en yaygın kullanılan Google yazı tipleri arasındadır. Hem web hem de basılı belgeler için uygundur.

10. Açık Sans

Open Sans yazı tipi, hem web'de hem de kağıt üzerinde okumayı kolaylaştıran insan yazısına en yakın olanıdır. Google Fonts API, bu fontu yalnızca bir haftada 28,5 milyardan fazla kez sundu!

WordPress web siteleri için başka birçok Google Yazı Tipi vardır. Sitenizin okuyucu kitlesi üzerinde hem olumlu hem de olumsuz etkileri olabileceğinden, yazı tipi ailesini seçerken akıllı olun.

5- Bir Web Sitesinde Google Yazı Tiplerini Kullanmanın En İyi Uygulamaları

WordPress Google Yazı Tiplerini entegre etmek roket bilimi değildir, ancak herhangi bir görevi gerçekleştirmenin her zaman iki yolu vardır - iyi yol ve en iyi yol.

WordPress'te Google Yazı Tiplerini kullanmayla ilgili en iyi uygulamalara göz atalım.

– Yazı Tipi Ağırlıklarını Sınırlayın: Yazı tipi ağırlıklarının tamamının seçilmesi caziptir ancak dezavantajları vardır. Her değişken için API ağırlaşır ve tüm yazı tipi ağırlıklarının yüklenmesi daha fazla zaman alır.

Bu genellikle web sayfasının başlangıcında yüklenir ve optimize edilmezse web sayfanızın ilk yükleme süresini yavaşlatabilir.

-Host Fonts Locally: Google font, başka bir yerde barındırılan çevrimiçi bir kitaplıktır. Sitenizin performansı üzerinde minimum bir etkisi olmasına rağmen, kullanılamaması durumunda, yerel olarak barındırılıyorsa seçilen Google yazı tiplerini yine de sunabilirsiniz.

-Erişilebilirlik önemlidir: Web sitenizi görme bozukluğu olan kişiler için optimize etmek artık bir seçenek değildir. Google yazı tipleri, yazı tipinizi bu tür ziyaretçiler için en uygun şekilde biçimlendirmenizi sağlar.

Ekran boyutlarının ve türlerinin çoğunda kolayca okunabilen ve okuyucunun gözüne ağır gelmeyen kontrastı kullanın. Çok parlak renkler veya çok açık renkler kullanmak ideal değildir. Çoğu okuyucu için en uygun rengi ve boyutu seçin.

Çözüm

WordPress'te Google Yazı Tiplerini kullanmak, web sitenizin görünümünü ve verdiği hissi hızla değiştirmenize yardımcı olabilir. İster profesyonel görünümlü bir siteye ister eğlenceli bir siteye gitmeye çalışıyor olun, Google Fonts sizin için mükemmel bir yazı tipine sahip olabilir.

Google Yazı Tiplerini wp_enqueue_style() işlevini ve Easy Google Fonts eklentisini kullanarak manuel olarak web sitenize nasıl ekleyebileceğinizi gösterdik. Umarım, şimdi işleri daha da ileriye götürmek için iyi bir konumdasınızdır.

WordPress web sitenizde hiç bir yazı tipi kitaplığı kullandınız mı? Sizden haber almayı çok isteriz, bu yüzden aşağıya yorum yaparak bize bildirin!