WordPress'te Özel Yazı Tipleri Nasıl Eklenir

WordPress'e özel yazı tipleri eklemek ister misiniz? Özel yazı tipleri, tipografiyi ve kullanıcı deneyimini geliştirmek için web sitenizde farklı yazı tiplerinin güzel kombinasyonlarını kullanmanıza olanak tanır.

Özel yazı tipleri, iyi görünmenin yanı sıra okunabilirliği artırmanıza, bir marka imajı oluşturmanıza ve kullanıcıların web sitenizde geçirdikleri süreyi artırmanıza da yardımcı olabilir.

Bu makalede, Google Fonts, TypeKit ve CSS3 @Font-Face yöntemini kullanarak WordPress'te özel yazı tiplerini nasıl ekleyeceğinizi göstereceğiz.

Not: Çok fazla yazı tipi yüklemek web sitenizi yavaşlatabilir. İki yazı tipi seçmenizi ve bunları web sitenizde kullanmanızı öneririz. Ayrıca, web sitenizi yavaşlatmadan bunları nasıl düzgün şekilde yükleyeceğinizi de göstereceğiz.

WordPress'te özel yazı tiplerinin nasıl ekleneceğine bakmadan önce, kullanabileceğiniz özel yazı tiplerini bulmaya bir göz atalım.

WordPress'te Kullanılacak Özel Yazı Tipleri Nasıl Bulunur?

Yazı tipleri eskiden pahalıydı, ama artık değil. Google Fonts, Typekit, FontSquirrel ve fonts.com gibi harika ücretsiz web fontlarını bulabileceğiniz birçok yer var.

Yazı tiplerini nasıl karıştıracağınızı ve eşleştireceğinizi bilmiyorsanız, Yazı Tipi Çiftini deneyin. Tasarımcıların güzel Google yazı tiplerini bir araya getirmesine yardımcı olur.

Yazı tiplerinizi seçerken, çok fazla özel yazı tipi kullanmanın web sitenizi yavaşlatacağını unutmayın. Bu yüzden iki yazı tipi seçmeli ve tasarımınız boyunca kullanmalısınız. Bu aynı zamanda tasarımınıza tutarlılık getirecektir.

Video öğretici

Videoyu beğenmediyseniz veya yazılı kılavuzu tercih ediyorsanız, lütfen okumaya devam edin.

Google Yazı Tiplerinden WordPress'e Özel Yazı Tipleri Ekleme

Google Fonts, web sitesi geliştiricileri arasında en büyük, ücretsiz ve en sık kullanılan font kitaplığıdır. WordPress'te Google Yazı Tiplerini eklemenin ve kullanmanın birden çok yolu vardır.

Yöntem 1: Kolay Google Yazı Tipleri Eklentisini Kullanarak Özel Yazı Tipleri Ekleme

Google Yazı Tiplerini web sitenize eklemek ve kullanmak istiyorsanız, bu yöntem açık ara en kolayıdır ve yeni başlayanlar için önerilir.

Yapmanız gereken ilk şey, Easy Google Fonts eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra Görünüm » Özelleştirici sayfasına gidebilirsiniz. Bu, yeni Tipografi bölümünü göreceğiniz canlı tema özelleştirici arayüzünü açacaktır.

Tipografiyi tıkladığınızda, web sitenizin Google Yazı Tiplerini uygulayabileceğiniz farklı bölümlerini göstereceksiniz. Düzenlemek istediğiniz bölümün altındaki 'Yazı Tipini Düzenle'yi tıklamanız yeterlidir.

Yazı tipi ailesi bölümünün altında, web sitenizde kullanmak istediğiniz herhangi bir Google Yazı Tipi'ni seçebilirsiniz. Ayrıca yazı tipi stilini, yazı tipi boyutunu, dolguyu, kenar boşluğunu ve daha fazlasını seçebilirsiniz.

Temanıza bağlı olarak, buradaki bölümlerin sayısı sınırlı olabilir ve web sitenizin birçok farklı alanı için yazı tipi seçimini doğrudan değiştiremeyebilirsiniz.

Bunu düzeltmek için eklenti, kendi kontrollerinizi oluşturmanıza ve bunları web sitenizdeki yazı tiplerini değiştirmek için kullanmanıza da olanak tanır.

Öncelikle Ayarlar » Google Yazı Tipleri sayfasını ziyaret etmeniz ve yazı tipi kontrolünüz için bir ad sağlamanız gerekir. Bu yazı tipi denetimini nerede kullanacağınızı hızla anlamanıza yardımcı olacak bir şey kullanın.

Ardından, 'Yazı tipi kontrolü oluştur' düğmesine tıklayın ve ardından CSS seçicilerini girmeniz istenecektir.

Hedeflemek istediğiniz HTML öğelerini (örneğin, h1, h2, p, blok alıntı) ekleyebilir veya CSS sınıflarını kullanabilirsiniz.

Değiştirmek istediğiniz belirli alan tarafından hangi CSS sınıflarının kullanıldığını öğrenmek için tarayıcınızdaki Inspect aracını kullanabilirsiniz.

Şimdi ayarlarınızı kaydetmek için 'Yazı tipi kontrolünü kaydet' düğmesine tıklayın. Web sitenizin farklı bölümleri için ihtiyaç duyduğunuz kadar yazı tipi denetleyicisi oluşturabilirsiniz.

Bu yazı tipi denetleyicilerini kullanmak için Görünüm »Özelleştirici'ye gitmeniz ve Tipografi sekmesine tıklamanız gerekir.

Tipografi altında, artık bir 'Tema Tipografi' Seçeneği de göreceksiniz. Üzerine tıklamak, daha önce oluşturduğunuz özel yazı tipi kontrollerinizi gösterecektir. Artık bu kontrol için yazı tiplerini ve görünümünü seçmek için düzenle düğmesine tıklayabilirsiniz.

Değişikliklerinizi kaydetmek için kaydet veya yayınla düğmesine tıklamayı unutmayın.

Yöntem 2: WordPress'te Google Yazı Tiplerini Manuel Olarak Ekleme

Bu yöntem, WordPress tema dosyalarınıza kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, WordPress'te kodu nasıl kopyalayıp yapıştıracağınızla ilgili kılavuzumuza bakın.

İlk olarak, Google yazı tipi kitaplığını ziyaret edin ve kullanmak istediğiniz yazı tipini seçin. Ardından, yazı tipinin altındaki hızlı kullanım düğmesine tıklayın.

Yazı tipi sayfasında, o yazı tipi için kullanılabilen stilleri göreceksiniz. Projenizde kullanmak istediğiniz stilleri seçin ve ardından üst kısımdaki kenar çubuğu düğmesine tıklayın.

Ardından, yerleştirme kodunu kopyalamak için kenar çubuğundaki 'Yerleştir' sekmesine geçmeniz gerekir.

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

İlk olarak, temanızın header.php dosyasını düzenleyebilir ve kodu <body> etiketinin önüne yapıştırabilirsiniz.

Ancak, WordPress'te kod düzenlemeye aşina değilseniz, bu kodu eklemek için bir eklenti kullanabilirsiniz.

Sadece Insert Headers and Footers eklentisini kurun ve etkinleştirin. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmeden sonra, Ayarlar »Üstbilgi ve Altbilgi Ekle sayfasına gidin ve 'Üstbilgideki komut dosyaları' kutusuna yerleştirme kodunu yapıştırın.

Değişikliklerinizi kaydetmek için Kaydet düğmesine tıklamayı unutmayın. Eklenti şimdi web sitenizin tüm sayfalarına Google Font gömme kodunu yüklemeye başlayacaktır.

Bu yazı tipini temanızın stil sayfasında şu şekilde kullanabilirsiniz:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Daha ayrıntılı talimatlar için, WordPress temalarına Google yazı tiplerinin nasıl ekleneceğine ilişkin kılavuzumuza bakın.

Typekit Kullanarak WordPress'te Özel Yazı Tipleri Ekleme

Typekit by Adobe Fonts, tasarım projelerinizde kullanabileceğiniz harika fontlar için başka bir ücretsiz ve premium kaynaktır. Ücretli bir abonelikleri ve kullanabileceğiniz sınırlı bir ücretsiz planları var.

Bir Adobe Fonts hesabına kaydolun ve fontlara gözat bölümünü ziyaret edin. Buradan bir yazı tipi seçmek ve bir proje oluşturmak için </> düğmesine tıklamanız gerekir.

Ardından, proje kimliğinizle birlikte yerleştirme kodunu göreceksiniz. Ayrıca, temanızın CSS'sinde yazı tipini nasıl kullanacağınızı da gösterecektir.

Bu kodu kopyalayıp web sitenizin <head> bölümüne yapıştırmanız gerekiyor.

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

İlk olarak, temanızın header.php dosyasını düzenleyebilir ve kodu <body> etiketinin önüne yapıştırabilirsiniz.

Ancak, WordPress'te kod düzenlemeye aşina değilseniz, bu kodu eklemek için bir eklenti kullanabilirsiniz.

Sadece Insert Headers and Footers eklentisini kurun ve etkinleştirin.

Etkinleştirmeden sonra, Ayarlar »Üstbilgi ve Altbilgi Ekle sayfasına gidin ve 'Üstbilgideki komut dosyaları' kutusuna yerleştirme kodunu yapıştırın.

Hepsi bu kadar, artık WordPress temanızın stil sayfasında seçtiğiniz Typekit yazı tipini şu şekilde kullanabilirsiniz:

h1 .site-title { 
font-family: gilbert, sans-serif;
} 

Daha ayrıntılı talimatlar için, Typekit kullanarak WordPress'e nasıl harika tipografi ekleyeceğinizi öğreticimize bakın.

CSS3 @font-face Kullanarak WordPress'e Özel Yazı Tipleri Ekleme

WordPress'e özel yazı tipleri eklemenin en doğrudan yolu, yazı tiplerini CSS3 @font-face yöntemini kullanarak eklemektir. Bu yöntem, web sitenizde beğendiğiniz herhangi bir yazı tipini kullanmanızı sağlar.

Yapmanız gereken ilk şey, beğendiğiniz yazı tipini bir web formatında indirmek. Yazı tipiniz için web formatına sahip değilseniz, FontSquirrel Webfont oluşturucusunu kullanarak onu dönüştürebilirsiniz.

Webfont dosyalarına sahip olduğunuzda, onu WordPress barındırma sunucunuza yüklemeniz gerekir.

Yazı tiplerini yüklemek için en iyi yer, temanızın veya alt temanızın dizinindeki yeni bir "yazı tipleri" klasörüdür.

Yazı tipini yüklemek için cPanel'inizin FTP veya Dosya Yöneticisini kullanabilirsiniz.

Yazı tipini yükledikten sonra, şunun gibi CSS3 @ yazı tipi-yüz kuralını kullanarak yazı tipini temanızın stil sayfasına yüklemeniz gerekir:

@font-face {
	font-family: Arvo;  
	src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normal;  
}

Yazı tipi ailesini ve URL'yi kendinizle değiştirmeyi unutmayın.

Bundan sonra, bu yazı tipini temanızın stil sayfasında aşağıdaki gibi herhangi bir yerde kullanabilirsiniz:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Fontları doğrudan CSS3 @font-face kullanarak yüklemek her zaman en iyi çözüm değildir. Google Fonts veya Typekit'ten bir yazı tipi kullanıyorsanız, optimum performans için yazı tipini doğrudan sunucularından sunmak en iyisidir.

Hepsi bu kadar, umarız bu makale WordPress'e özel yazı tipleri eklemenize yardımcı olmuştur. WordPress'te simge yazı tiplerinin nasıl kullanılacağı ve WordPress'te yazı tipi boyutunun nasıl değiştirileceği ile ilgili kılavuzumuza da göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.