WordPress’e Özel Yazı Tipleri Ekleme

WordPress’e özel yazı tipleri eklemek istiyor musunuz? Özel yazı tipleri, tipografiyi ve kullanıcı deneyimini geliştirmek için web sitenizdeki farklı yazı tiplerinin güzel kombinasyonunu kullanmanıza olanak tanır.


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

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

WordPress'e Özel Yazı Tipleri Ekleme

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 doğru şekilde yükleyeceğinizi de göstereceğiz.

WordPress’e nasıl özel yazı tipi ekleyeceğimize bakmadan önce, kullanabileceğiniz özel yazı tiplerini bulmaya bakalı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..

Fontları nasıl karıştıracağınızı ve eşleştireceğinizi bilmiyorsanız, Font Pair’yi deneyin. Tasarımcıların güzel Google yazı tiplerini birlikte eşleştirmelerine yardımcı olur.

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

Video öğretici

WPBeginner’a abone olun

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 Yazı Tiplerinin Önizlemesi

Google Fonts, web sitesi geliştiricileri arasında en büyük, ücretsiz ve en çok kullanılan font kütüphanesidir. WordPress’te Google Yazı Tipleri eklemenin ve kullanmanın birçok yolu vardır.

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

Web sitenize Google Yazı Tipleri eklemek ve kullanmak istiyorsanız, bu yöntem en kolayıdır ve yeni başlayanlar için önerilir.

Yapmanız gereken ilk şey, Easy Google Fonts eklentisini yüklemek 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ştirildikten sonra şu adrese gidebilirsiniz: Görünüm »Özelleştirici sayfa. Bu, yeni Tipografi bölümünü göreceğiniz canlı tema özelleştirici arayüzünü açacaktır.

Customizer tipografi

Tipografi’yi tıkladığınızda, web sitenizin Google Yazı Tiplerini uygulayabileceğiniz farklı bölümleri gösterilir. Düzenlemek istediğiniz bölümün altındaki Font Yazı Tipini Düzenle’yi tıklayın.

Tipografi ayarları

Yazı tipi ailesi bölümünün altında, web sitenizde kullanmak istediğiniz herhangi bir Google Yazı Tipini seçebilirsiniz. Yazı tipi stilini, yazı tipi boyutunu, dolgu, kenar boşluğu ve daha fazlasını da 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 ayrıca kendi denetimlerinizi oluşturmanıza ve bunları web sitenizdeki yazı tiplerini değiştirmek için kullanmanıza izin verir..

İlk olarak, ziyaret etmeniz gerekiyor Ayarlar »Google Yazı Tipleri sayfasına gidin ve yazı tipi kontrolünüz için bir ad girin. Bu yazı tipi denetimini nerede kullanacağınızı hızlı bir şekilde anlamanıza yardımcı olacak bir şey kullanın.

Yazı tipi kontrol bölümü

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

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

Değiştirmek istediğiniz alan tarafından hangi CSS sınıflarının kullanıldığını bulmak için tarayıcınızdaki İnceleme aracını kullanabilirsiniz.

CSS seçicileri ekle

Şimdi ayarlarınızı kaydetmek için “Yazı tipi kontrolünü kaydet” düğmesini tıklayın. Web sitenizin farklı bölümleri için istediğiniz kadar yazı tipi denetleyicisi oluşturabilirsiniz.

Bu yazı tipi denetleyicilerini kullanmak için şu adrese gidin: Görünüm »Özelleştirici ve Tipografi sekmesini tıklayın.

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

Tema tipografi seçeneği

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

Yöntem 2: WordPress’te Google Yazı Tiplerini El İle Ekleme

Bu yöntem, WordPress tema dosyalarınıza kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, WordPress’e kod kopyalama ve yapıştırma ile ilgili kılavuzumuza bakın.

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

Kullanmak istediğiniz yazı tipi stillerini seçin

Yazı tipi sayfasında, o yazı tipi için kullanılabilir stilleri görürsünüz. Projenizde kullanmak istediğiniz stilleri seçin ve ardından üst taraftaki kenar çubuğu düğmesine tıklayın.

Yazı tipi yerleştirme bağlantısını alın

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

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

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

Ancak, WordPress’te kod düzenlemeyi bilmiyorsanız, bu kodu eklemek için bir eklenti kullanabilirsiniz.

Üstbilgi ve Altbilgi Ekle eklentisini yüklemeniz ve etkinleştirmeniz yeterlidir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirildikten sonra şu adrese gidin: Ayarlar »Üstbilgi ve Altbilgi Ekle sayfasına yerleştirip gömme kodunu “Başlıktaki komut dosyaları” kutusuna yapıştırın.

WordPress sitenize yazı tipi kodu ekleyin

Değişikliklerinizi saklamak için Kaydet düğmesini tıklamayı unutmayın. Eklenti şimdi web sitenizin tüm sayfalarına Google Font yerleştirme kodunu yüklemeye başlayacak.

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

.h1 site başlığı {
font-family: ‘Open Sans’, Arial, sans-serif;
}

Daha ayrıntılı talimatlar için WordPress temalarına Google fontları ekleme hakkındaki kılavuzumuza bakın.

Typekit Kullanarak WordPress’e Özel Yazı Tipleri Ekleme

Adobe Fontları

Adobe Fonts’dan Typekit, tasarım projelerinizde kullanabileceğiniz harika yazı tipleri için başka bir ücretsiz ve premium kaynaktır. Ücretli bir aboneliğin yanı sıra kullanabileceğiniz sınırlı bir ücretsiz plan 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üğmeyi tıklamanız gerekir..

Bir projeye typekit yazı tipi ekleme

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

Bu kodu kopyalayıp web sitenizin bölümünün içine yapıştırmanız gerekir.

Typekit font gömme kodu

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

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

Ancak, WordPress’te kod düzenlemeyi bilmiyorsanız, bu kodu eklemek için bir eklenti kullanabilirsiniz.

Üstbilgi ve Altbilgi Ekle eklentisini yüklemeniz ve etkinleştirmeniz yeterlidir.

Etkinleştirildikten sonra şu adrese gidin: Ayarlar »Üstbilgi ve Altbilgi Ekle sayfasına yerleştirip gömme kodunu “Başlıktaki komut dosyaları” kutusuna yapıştırın.

WordPress'te Adobe Fonts ile Typekit Ekleme

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

h1 .site-başlık {
yazı tipi ailesi: gilbert, sans-serif;
}

Daha ayrıntılı talimatlar için Typekit kullanarak WordPress’e nasıl harika tipografi ekleyeceğimize dair öğreticimize göz atın.

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

WordPress’e özel yazı tipi eklemenin en doğrudan yolu, CSS3 @ yazı tipi-yüz yöntemini kullanarak yazı tiplerini eklemektir. Bu yöntem, web sitenizde istediğiniz herhangi bir yazı tipini kullanmanızı sağlar.

Yapmanız gereken ilk şey, istediğiniz yazı tipini bir web formatında indirmek. Fontunuz için web formatınız yoksa FontSquirrel Webfont jeneratörünü kullanarak fontunuzu dönüştürebilirsiniz.

Webfont dosyalarına sahip olduktan sonra, WordPress barındırma sunucunuza yüklemeniz gerekir.

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

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

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

@ font-face {
yazı tipi ailesi: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
yazı tipi ağırlığı: normal;
}

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

Bundan sonra, bu yazı tipini temanızın stil sayfasında herhangi bir yerde kullanabilirsiniz:

.h1 site başlığı {
font ailesi: "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, en iyi performans için yazı tipini doğrudan sunucularından sunmak en iyisidir.

Hepsi bu, umarız bu makale WordPress’e özel yazı tipleri eklemenize yardımcı olmuştur. WordPress’te simge yazı tiplerini kullanma ve WordPress’te yazı tipi boyutunu değiştirme hakkındaki kılavuzumuza da göz atmak isteyebilirsiniz..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me