WordPress Temalarına Google Web Yazı Tiplerini “Doğru” şekilde Ekleme

Google yazı tipleri, web tasarımcıları için inanılmaz ücretsiz bir kaynaktır. WPBv4’te, popüler bir Google Yazı Tipi kombinasyonunu kullanmaya başladık: Oswald ve Lora. Bazı kullanıcılarımız bize WordPress temalarına Google Web yazı tiplerini nasıl ekleyeceğimizi sordu. Hatırlarsanız, WordPress Post Editor’da Google fontlarının nasıl ekleneceğini gösterdik. Bu makalede, WordPress temalarınıza Google Web Yazı Tiplerini nasıl ekleyeceğinizi göstereceğiz. Doğru yol, performans için optimize edildi.


Beğendiğiniz Google Web Yazı Tiplerini Bulun

Yapmanız gereken ilk şey, beğendiğiniz bir Google yazı tipi bulmak. Google yazı tiplerine gidin ve kütüphaneye göz atın. Beğendiğiniz yazı tipini bulduğunuzda, “Hızlı kullanım” buton.

Google Fonts'tan hızlı yazı tipleri

Hızlı kullanım düğmesine tıkladıktan sonra yeni bir sayfaya yönlendirilirsiniz. Web sitenize ekleyebileceğiniz kod içeren kullanım talimatı kutusunu görene kadar aşağı kaydırın.

Google font gömme kodu

Sitenize yazı tipi eklemek için üç farklı sekme olduğunu göreceksiniz. Birincisi, Google yazı tiplerini sitenize eklemek için standart ve önerilen yöntemdir. İkinci sekme @import CSS yöntemini, son sekme JavaScript yöntemini kullanır.

Size bu yöntemlerin her birini nasıl kullanacağınızı ve artıları ve eksileri neler olduğunu göstereceğiz.

Video öğretici

WPBeginner’a abone olun

Videoyu beğenmediyseniz veya daha fazla talimat gerekiyorsa, okumaya devam edin.

WordPress Temalarına Google Web Yazı Tipleri Ekleme

İlk iki yöntemi kullanarak daha çok insan gördük.

En kolay yol, temanızın style.css @import sekmesinde bulunan yazı tipi kodunu aşağıdaki gibi dosyalayıp yapıştırın:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Ayrıca, birden çok yazı tipi isteğini bir araya getirebilirsiniz. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Bu yöntem çok kolaydır, ancak WordPress sitenize Google yazı tiplerini eklemenin en iyi yolu değildir. @İmport yöntemini kullanmak paralel indirmeleri engeller, yani tarayıcı içeriğin geri kalanını indirmeye başlamadan önce içe aktarılan dosyanın indirmeyi bitirmesini bekler.

@İmport kullanmanız GEREKİRse, en azından birden fazla isteği bir araya getirin.

Performansı Optimize Edilmiş Google Web Fontları Ekleme Yöntemi

Google yazı tiplerini eklemenin en iyi yolu, içe aktarma yöntemi yerine bağlantı yöntemini kullanan Standart yöntemini kullanmaktır. 1. adımdan aldığınız yazı tipi URL’nizi almanız yeterlidir. Birden fazla yazı tipi ekliyorsanız, iki yazı tipini bir | karakter. Ardından kodu temanızın baş bölümüne yerleştirin.

Büyük olasılıkla header.php dosyanızı düzenlemeniz ve aşağıdaki kodu ana stil sayfanızın üstüne yapıştırmanız gerekecektir. Örnek şöyle görünecektir:

Temel olarak yazı tipi isteğini mümkün olduğunca erken koymaktır. Google Web Yazı Tipleri bloguna göre, @ yazı tipi yüzü bildiriminden önce bir komut dosyası etiketi varsa, yazı tipi dosyası indirilene kadar Internet Explorer sayfada hiçbir şey oluşturmaz.

Bunu yaptıktan sonra, temanızın CSS dosyasında şu şekilde kullanmaya başlayabilirsiniz:

h1 {
yazı tipi ailesi: ‘Oswald’, Helvetica, Arial, serif;
}

Şimdi orada birçok tema çerçevesi ve çocuk temaları var. Bir tema çerçevesi kullanıyorsanız ana temanızın dosyalarını özel olarak değiştirmeniz ÖNERİLMEZ çünkü bu çerçeveyi bir sonraki güncellemenizde değişiklikleriniz geçersiz kılınır. Google yazı tiplerini çocuk temalarınıza düzgün bir şekilde eklemek için o ana tema veya çerçeve tarafından sunulan kancaları ve filtreleri kullanmanız gerekir..

WordPress’te Google Yazı Tiplerini Düzgün Sıkma

Google yazı tiplerini WordPress sitenize eklemenin başka bir yolu, temayı fonksiyonlarının font.php dosyasında veya siteye özgü bir eklentide yazı tipini sıkmaktır.

işlev wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic.400italic.700italic.400,700,300’, yanlış);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Yazı tipi bağlantısını kendinizinkilerle değiştirmeyi unutmayın.

JavaScript Kullanarak Google Yazı Tiplerini Yükleme

Bu yöntem için, kodu Google font kullanım talimatları bölümündeki JavaScript sekmesine kopyalamanız gerekir. Bu kodu etiketinizden hemen sonra temanıza veya alt temanın header.php dosyasına yapıştırabilirsiniz.

Sitenizde Google Web Yazı Tiplerini kullanmayla ilgili son ipucumuz, kullanmayacağınız yazı tiplerini yüklememek olacaktır. Örneğin, yalnızca kalın ve normal ağırlığı istiyorsanız, diğer tüm stilleri eklemeyin.

Bu makalenin, WordPress temalarınıza doğru şekilde Google Web Yazı Tipleri eklemenize yardımcı olmasını umuyoruz, böylece siteniz hızlı yüklenebilir. WordPress’te Typekit yazı tiplerini ekleme hakkındaki kılavuzumuza da göz atmak isteyebilirsiniz..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map