WordPress’te Özel Yazı Tipleri Nasıl Eklenir?

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

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

Bu yazıda, Google Fonts, TypeKit ve [email protected] yöntemlerini kullanarak WordPress’e nasıl özel yazı tipleri ekleyeceğinizi göstereceğiz.

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

WordPress’te özel yazı tiplerinin nasıl ekleneceğini görmeden önce, kullanabileceğiniz özel yazı tiplerini bulmaya bir göz atalım.

WordPress’te kullanılacak özel yazı tipleri nasıl bulunur?

Çeşmeler eskiden pahalıydı ama artık değil. Google Fonts, Typekit, FontSquirrel ve Font.com gibi harika ücretsiz web yazı tiplerini bulabileceğiniz birçok yer var.

Yazı tiplerini nasıl karıştırıp eşleştireceğinizi bilmiyorsanız Eşleştirmeyi deneyin. Tasarımcıların güzel Google yazı tiplerini bir araya getirmelerine yardımcı olun.

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

Video öğretici

WPBeginner’a kaydolun

Videoyu beğenmediyseniz veya yazılı talimatları beğenmediyseniz okumaya devam edin.

Google yazı tiplerinden özel WordPress yazı tipleri ekleyin

Google Yazı Tipleri, web sitesi geliştiricileri arasında en büyük, ücretsiz ve en yaygın kullanılan yazı tipi kitaplığıdır. WordPress’te Google yazı tiplerini eklemenin ve kullanmanın birkaç yolu vardır.

1. Yöntem: Google Easy Fonts eklentisiyle özel yazı tipleri ekleyin

Google Yazı Tiplerini web sitenize 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ştirildiğinde, şu adrese gidebilirsiniz: Görünüm » Özelleştirme Sayfa. Bu, yeni bir Tipografi bölümü göreceğiniz canlı tema özelleştirici arayüzünü açacaktır.

Yazı Tipleri’ne tıklayarak, web sitesinin Google yazı tiplerini uygulayabileceğiniz farklı bölümlerini göreceksiniz. Düzenlemek istediğiniz bölümün altındaki “Kaynağı Düzenle”ye tıklamanız yeterlidir.

Yazı tipi ailesi bölümünde, sitenizde kullanmak istediğiniz herhangi bir Google yazı tipini seçebilirsiniz. Ayrıca yazı tipi stilini, yazı tipi boyutunu, dolguyu, kenar boşluklarını ve daha fazlasını seçebilirsiniz.

Temanıza bağlı olarak buradaki bölüm sayısı sınırlı olabilir ve sitenizin çeşitli alanları için yazı tipi seçimini doğrudan değiştiremeyebilirsiniz.

Eklenti, bunun üstesinden gelmek için kendi kontrollerinizi oluşturmanıza ve bunları sitenizdeki yazı tiplerini değiştirmek için kullanmanıza da olanak tanır.

İlk önce erişmeniz gerekiyor Ayarlar » Google Yazı Tipleri sayfasını açın ve yazı tipi kontrolünüz için bir ad verin. Bu kaynak kontrolünü nerede kullanacağınızı hızlı bir şekilde anlamanıza yardımcı olacak bir şey kullanın.

Ardından, “Yazı Tipi Kontrolü Oluştur” düğmesini tıklayın ve ardından CSS seçicilerini girmeniz istenecektir.

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

Değiştirmek istediğiniz belirli alanın hangi CSS sınıflarını kullandığını öğrenmek için tarayıcınızdaki İnceleme aracını kullanabilirsiniz.

Şimdi ayarlarınızı kaydetmek için “Kaynak Kontrolünü Kaydet” düğmesini tıklayın. Sitenizin farklı bölümleri için ihtiyaç duyduğunuz kadar çok sayıda yazı tipi sürücüsü oluşturabilirsiniz.

Bu yazı tipi sürücülerini kullanmak için şu adrese gitmelisiniz: Görünüm » Özelleştirme ve tipografi sekmesine tıklayın.

Tipografide artık “tematik tipografi” seçeneğini de göreceksiniz. Üzerine tıklamak, daha önce oluşturduğunuz özel yazı tipi kontrollerini getirecektir. Artık bu kontrolün yazı tipini 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 Ekleyin

Bu yöntem, WordPress tema dosyalarınıza kod eklemenizi gerektirir. Bunu daha önce yapmadıysanız, WordPress’te kodun nasıl kopyalanıp yapıştırılacağına ilişkin kılavuzumuza göz atın.

Öncelikle, Google’ın yazı tipi kitaplığına gidin ve kullanmak istediğiniz yazı tipini seçin. Ardından yazı tipinin altındaki hızlı kullanım düğmesine tıklayın.

Yazı tipleri 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 “Göm” sekmesine geçmeniz gerekir.

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

Önce temanızın header.php dosyasını düzenlemeniz ve önce kodu yapıştırmanız yeterlidir.

kart.

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.

Aktivasyondan sonra şu adrese gidin: Ayarlar » Üst bilgi ve alt bilgi ekle sayfa ve katıştırma kodunu “Komut dosyası üst bilgi” kutusuna yapıştırın.

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

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, bir WordPress temasına Google yazı tiplerinin nasıl ekleneceğine ilişkin kılavuzumuza bakın.

Typekit Kullanarak Özel WordPress Yazı Tipleri Ekleyin

Adobe Fonts Typekit, tasarım projelerinizde kullanabileceğiniz harika yazı tipleri 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 kaydolmanız ve font arama bölümüne gitmeniz yeterlidir. Buradan kaynak seçmek ve projeyi oluşturmak için butona tıklamanız gerekiyor.

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

Bu kodu kopyalayıp yapıştırmalısınız.

web sitelerinin bölümü.

Bu kodu WordPress sitenize eklemenin iki yolu vardır.

Önce temanızın header.php dosyasını düzenlemeniz ve önce kodu yapıştırmanız yeterlidir.

kart.

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.

Aktivasyondan sonra şu adrese gidin: Ayarlar » Üst bilgi ve alt bilgi ekle sayfa ve katıştırma kodunu “Komut dosyası üst bilgi” kutusuna yapıştırın.

İşte bu kadar, seçtiğiniz Typekit yazı tipini WordPress tema stil sayfanızda şu şekilde kullanabilirsiniz:

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

Daha ayrıntılı talimatlar için, Typekit kullanarak WordPress’te harika yazı tipinin nasıl ekleneceğine ilişkin kılavuzumuza bakın.

CSS3 @font-face kullanarak özel WordPress yazı tipleri ekleyin

WordPress’te özel yazı tipleri eklemenin en doğrudan yolu, [email protected] yöntemini kullanarak yazı tipleri eklemektir. Bu yöntem, web sitenizde istediğiniz herhangi bir yazı tipini kullanmanıza olanak tanır.

İlk yapmanız gereken istediğiniz yazı tipini web formatında indirmek. Yazı tipiniz için bir web formatınız yoksa FontSquirrel Webfont oluşturucuyu kullanarak dönüştürebilirsiniz.

Web yazı tipi dosyalarına sahip olduğunuzda, bunları WordPress barındırma sunucunuza yüklemeniz gerekecektir.

Yazı tiplerini yüklemek için en iyi yer, tema veya alt tema klasörünüzdeki yeni “yazı tipleri” klasörüdür.

Yazı tiplerini indirmek için cPanel’inizden FTP veya Dosya Yöneticisini kullanabilirsiniz.

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

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

Yazı tipi ailenizi ve URL’nizi değiştirmeyi unutmayın.

Ardından, bu yazı tipini temanızın stil sayfasında herhangi bir yerde şu şekilde kullanabilirsiniz:

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

Yazı tiplerini doğrudan CSS3 @font-face kullanarak yüklemek her zaman en iyi çözüm değildir. Google Yazı Tipleri veya Typekit yazı tiplerini kullanıyorsanız, optimum performans için yazı tiplerini doğrudan sunucunuzdan sunmak en iyisidir.

Hepsi bu kadar, umarız bu makale özel WordPress 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ılavuzlarımıza da göz atabilirsiniz.

Bu makaleyi beğendiyseniz, kanalımıza abone olun YouTube WordPress video eğitimlerini izlemek için. Ayrıca bizi bulabilirsiniz Twitter y Facebook.