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

Web sitenizin kalabalığın arasından sıyrılmasını istiyorsanız, özel yazı tiplerini kullanmak bunu başarmanıza yardımcı olacaktır. Aralarından seçim yapabileceğiniz binlerce güzel özel yazı tipi var ve projeniz için doğru olanları seçerek sadece benzersiz değil, aynı zamanda tarzınızı ve markanızı da yansıtan bir web sitesi oluşturabileceksiniz. Peki WordPress'e özel yazı tiplerini nasıl eklersiniz?

Bu yazıda, web sitenize özel yazı tipleri uygulama hakkında bilmeniz gereken her şeyi ele alacağız. Bu içerir:

• Özel yazı tiplerini nerede bulabilirim?
• Easy Google Fonts eklentisini kullanarak web sitenize Google Fonts nasıl eklenir
• Google Yazı Tiplerini web sitenize manuel olarak ekleme (eklenti gerekmez)
• WordPress'e Adobe Fontları Ekleme
• Web Alanınıza Herhangi Bir Özel Yazı Tipi Nasıl Eklenir

başlamaya hazır mısın?

Özel Yazı Tiplerini Nerede Bulabilirsiniz?

Günümüzde birçok premium WordPress teması, çok sayıda özel yazı tipiyle birlikte gelir. Ancak bunlar genellikle tema şişkinliğini artırabilir ve web sitenizin yükleme sürelerini düşündüğünüzden daha fazla etkileyebilir. Ayrıca, aslında en fazla yalnızca birkaç özel yazı tipi kullandığınızı göreceksiniz, bu nedenle temanızın sağladığı yazı tiplerinin çoğuna asla ihtiyaç duyulmaz.

Bu nedenle, gerektiğinde özel yazı tipleri ekleyebileceğiniz hafif bir WordPress teması seçmenizi öneririz. Web siteniz için doğru özel yazı tiplerini bulabileceğiniz birkaç yer var. Hadi bir bakalım…

• Google Yazı Tipleri – En popüler seçim olan Google Yazı Tipleri, 135'den fazla dilde kullanılabilen 900'den fazla açık kaynaklı tasarımcı yazı tipinden oluşan ücretsiz bir dizin sunar. Bu yazı tiplerine hızlı bir şekilde göz atılabilir ve ardından herhangi bir web tasarım projesine sorunsuz bir şekilde entegre edilebilir.
• Adobe Fonts (Önceden Typekit olarak biliniyordu) – Typekit, hizmetinin hem ücretsiz hem de premium sürümlerini sunsa da, şimdi Adobe Fonts olarak yeniden adlandırıldı, bu kaynağa erişmek için ücretli Adobe Creative Cloud paketine kaydolmanız gerekecek. Aralarından seçim yapabileceğiniz binlerce yazı tipi vardır, tüm yazı tipleri kişisel ve ticari kullanım için lisanslıdır ve ayrıca tasarım konusunda gözü olmayanlar için mükemmel olan proje temalı yazı tipi paketlerinden de seçim yapabilirsiniz.
• Yazı Tipi Sincap - Yazı Tipi Sincap kitaplığında, ücretsiz ve birinci sınıf yazı tiplerinin bir karışımını bulacaksınız, ikincisi tek seferlik satın alımlar olarak satın alınabilir. Yine, çoğunluğu ücretsiz ve ticari olarak lisanslanmış binlerce yüksek kaliteli yazı tipi arasından seçim yapabilirsiniz.
• Fonts.com – 150.000'den fazla masaüstü ve web yazı tipi ürünü sunan Fonts.com, etkileyici bir premium özel yazı tipi koleksiyonu içerir. Ayrıca Font.com blogunda tipografik ipuçları ve teknikleri paylaşan bir dizi ilginç makale bulacaksınız.
• FontPair – Diğer kaynaklara göre biraz daha farklı bir deneyim sunan FontPair, Google Fonts'taki yazı tiplerini bir araya getirerek web siteniz için doğru yazı tipi kombinasyonlarını bulmanıza yardımcı olur.

Artık özel yazı tiplerini nerede bulacağınızı biliyorsunuz. Şimdi, WordPress web sitenize Google Yazı Tiplerini nasıl ekleyeceğinize bakalım.

Eklenti Kolay Google Yazı Tiplerini Kullanarak WordPress'e Google Yazı Tipleri Nasıl Eklenir

Google Fonts, özel yazı tipleri için en popüler kaynak olduğundan, bu kitaplıktan web sitenize nasıl yazı tipi ekleyeceğinize bakarak başlayacağız. Bunu yapmanın birkaç yolu vardır, ancak en hızlı ve en kolay seçenek WordPress eklentisi Easy Google Fonts'u kullanmaktır.

Easy Google Fonts, bir kod satırına dokunmanıza gerek kalmadan WordPress web sitenize özel yazı tipleri eklemenizi sağlayacak ücretsiz bir WordPress eklentisidir. WordPress özelleştirici ile entegre olan bu eklenti, sayfayı yenilemek zorunda kalmadan web sitenizin ön ucuna gerçek zamanlı olarak Google yazı tipleri eklemenize ve kullanmanıza olanak tanır.

Şimdi bu eklentiyi nasıl kuracağımızı ve kullanacağımızı öğrenelim.

1. Adım: Kolay Google Yazı Tiplerini Yükleyin

Easy Google Fonts'u kullanmaya başlamak için WordPress kontrol panelinizi açın ve menüden Eklentiler > Yeni Ekle'yi seçin.

Ardından arama işlevine Easy Google Fonts yazın ve eklenti alındıktan sonra Yükle > Etkinleştir'e tıklayın.

Artık WordPress menünüzde Ayarlar altında Kolay Google Yazı Tiplerini bulacaksınız.

2. Adım: WordPress Özelleştiricisinde Yazı Tiplerini Düzenleyin

Easy Google Fonts'u yükledikten sonra, WordPress menünüzden Görünüm > Özelleştir öğesini seçin. Web siteniz şimdi, özelleştiriciye bir Tipografi bölümünün eklendiğini göreceğiniz ön uçta açılacaktır.

Tipografi'ye tıklayın. Ardından, web sitenizin özel bir Google Yazı Tipi uygulamak istediğiniz farklı alanlarını seçebilirsiniz (örn. paragraf, Başlık 2, Başlık 3, vb.).

Düzenlemek istediğiniz bölümün altında Yazı Tipi Düzenle'yi tıklayın. Ardından kullanmak istediğiniz yazı tipini seçebilirsiniz – her bir yazı tipinin doğrudan web sitenizde nasıl göründüğünü önizleyebilirsiniz.

Yalnızca yazı tipi türünü değiştirmekle kalmaz, aynı zamanda rengi, boyutu, konumu ve çok daha fazlasını da değiştirebilirsiniz. Yeni yazı tipinizden memnun kaldığınızda Yayınla 'yı tıklayın.

3. Adım: Özel Yazı Tipi Kontrolleri Oluşturun

Kolay Google Yazı Tipleri varsayılan kontrolleri, paragraf bölümlerinin ve 1-6 başlıklarının yazı tiplerini değiştirmenize olanak tanır. Ancak, temanızın tüm öğeleri varsayılan yazı tipi denetimleriyle yönetilemez.

Temanızın farklı bir öğesini (paragraf veya başlık dışında) değiştirmek istiyorsanız, kendi özel yazı tipi kontrollerinizi oluşturmanız gerekir. Kolay Yazı Tipi Kontrolü bunu kolayca yapmanızı sağlasa da, yine de CSS seçicileri hakkında temel bir anlayışa ihtiyacınız olacak.

Özel yazı tipi kontrolleri eklemek için WordPress kontrol panelinizden Ayarlar > Google Yazı Tipleri'ni seçin. Ardından, Yazı Tipi Denetimlerini Düzenle sekmesinde, yeni yazı tipi denetim grubunuza uygun bir ad verin ve ardından Yazı Tipi Denetimi Oluştur öğesini seçin. Burada blok alıntılar için bir yazı tipi kontrolü oluşturacağız…

CSS Seçici Ekle altında, yönetmek istediğiniz öğe için CSS seçiciyi ekleyin. Dilerseniz birden fazla eleman ekleyebilirsiniz. Ardından Yazı Tipi Denetimini Kaydet'i seçin.

Web sitenizin ön ucundaki Özelleştirici'ye döndüğünüzde, Tipografi altında, yeni özel kontrollerinize erişebileceğiniz Tema Tipografisi seçeneğini bulacaksınız.

Artık belirli özel öğe için yeni bir özel yazı tipi seçebilir ve diğer Görünüm ve Konumlandırma ayarlarını değiştirebilirsiniz.

Kolay Özel Yazı Tipleri, Google'dan WordPress'e özel yazı tipleri eklemek isteyen herkes için harika bir seçenektir. Ancak, isterseniz, Google Yazı Tiplerini web sitenize yalnızca kod kullanarak, eklenti olmadan manuel olarak da ekleyebilirsiniz. Bunu nasıl yapacağımızı öğrenelim…

Google Yazı Tiplerini WordPress'e Manuel Olarak Ekleme (eklenti gerekmez)

Google Yazı Tiplerini WordPress'e manuel olarak eklemeyi tercih ederseniz, çok temel bir kodlama bilgisine ihtiyacınız olacaktır.

1. Adım: Bir Google Yazı Tipi Seçin

Başlamak için Google Fonts'u açın ve web sitenize eklemek istediğiniz özel yazı tipini seçin.

Ardından yazı tipi sayfasında Bu Yazı Tipi Seç'i tıklayın. Burada Indie Flower yazı tipini seçtik.

Şimdi ekranınızda bir açılır pencere belirecektir. Seçtiğiniz yazı tipine bağlı olarak, yazı tipi ağırlıkları ve stilleri için çeşitli özelleştirme seçeneklerine erişebilecek ve aynı zamanda yerleştirme bilgilerini görüntüleyebileceksiniz.

2. Adım: Özel Yazı Tipinin Kodunu WordPress Web Sitenize Gömün

Ardından, Embed kodunu kopyalamanız (yukarıdaki açılır pencereye bakın) ve WordPress temanızın <head> bölümüne yapıştırmanız gerekecek. Bunu yapmanın en kolay yolu, ücretsiz WordPress eklentisi Insert Headers and Footers'ı yüklemektir. Bu eklentiyi kullanarak, tema dosyalarınızı düzenlemek zorunda kalmadan web sitenize hızlı bir şekilde kod ekleyebilirsiniz.

Kurulumdan sonra, WordPress kontrol panelinizden Ayarlar > Üst Bilgi ve Alt Bilgi Ekle'yi seçerek eklenti ayarlarını açın. Ardından, Google Fonts yerleştirme kodunuzu Başlık bölümüne eklemeniz gerekir.

Aynı şekilde, isterseniz alt temanızın header.php dosyasını düzenleyebilirsiniz.

3. Adım: CSS Kullanarak Yeni Yazı Tipini Uygulayın

Özel yazı tipinizin HTML kodunu web sitenize ekledikten sonra, yeni özel yazı tipinizi uygulamak için artık CSS'yi kullanabilirsiniz. Google Yazı Tipleri açılır penceresinde, yeni yazı tipinize özel CSS kurallarını bulacaksınız.

Web sitenizin canlı tarafındaki Özelleştiriciye geri dönün, Ek CSS'yi seçin. Sitenizdeki yazı tiplerini özelleştirmek için buraya CSS kodunu girebilirsiniz. Aşağıda başlık 2 ve paragraf bölümlerine Indie Flower CSS kodunu uyguladığımızı görebilirsiniz…

Özelleştirici size yazı tipi değişikliklerini gerçek zamanlı olarak gösterecek ve sonuçlardan memnunsanız Yayınla 'yı tıklayın.

WordPress'e Adobe Fontları Nasıl Eklenir

Adobe premium Creative Cloud paketine kaydolduysanız, özel yazı tiplerinden herhangi birini WordPress web sitenize ekleyebilirsiniz. Bu işlem, sitenize manuel olarak Google Fonts ekleme işlemine çok benzer. Hadi hızlıca bir göz atalım.

1. Adım: Bir Adobe Yazı Tipi Seçin

Öncelikle, Adobe'nin kapsamlı yazı tipi kitaplığına göz atmanız ve projenize uygun bir yazı tipi/yazı tipi seçmeniz gerekecektir. Bir seçim yaptıktan sonra, yazı tipini yeni bir Web Projesine eklemek için </> simgesine tıklayın.

Şimdi Web Projenizi adlandırmanız ve dahil etmek istediğiniz yazı tipi ağırlıklarını ve stilleri seçmek için onay kutularını kullanmanız istenecektir. Ardından Proje Oluştur'u seçin.

2. Adım: Adobe Font Kodunu WordPress Web Sitenize Gömün

Bir sonraki adım, Adobe'nin seçtiğiniz yazı tipi için sağladığı kodu WordPress web sitenize yerleştirmektir.

Bu, Google Fonts kodunu gömmekle tamamen aynı süreci takip eder. Kodu web sitenizdeki <head> etiketine gömün veya WordPress eklentisi Insert Headers and Footers (daha önce tartışıldığı gibi) kullanın.

3. Adım: CSS Kullanarak Yeni Yazı Tipini Uygulayın

Yine, Google Fonts gibi, artık yeni Adobe özel fontunuzu CSS kurallarını kullanarak uygulayabilirsiniz. Adobe kontrol panelinizde, Web Projesi sayfanız, seçtiğiniz her yazı tipi için yazı tipi stili ve sayısal ağırlığının yanı sıra CSS yazı tipi-aile adını da listeleyecektir.

WordPress web sitenize döndüğünüzde, bu CSS kuralları, Ek CSS altındaki Özelleştirici içinde kullanılabilir.

Şimdi, son derece popüler ücretsiz Google Fonts'un yanı sıra etkileyici premium kaynak Adobe Fonts'u kullanarak WordPress'e özel fontların nasıl ekleneceğini ele aldık.

Ancak, tartışacağımız son seçenek, sitenizin sunucusuna yükleyerek web sitenize herhangi bir özel yazı tipi eklemenizi sağlar. Daha fazlasını öğrenelim.

Web Alanınıza Özel Yazı Tipi Nasıl Eklenir

Web alanınıza özel bir yazı tipi eklemek nispeten basittir, ancak yine, yazı tipini web sitenize uygulamak için temel bir CSS anlayışına ihtiyacınız olacaktır.

1. Adım: Özel Yazı Tipi İndirin

Bu makalenin başında belirtildiği gibi, web sitenizde kullanmak için ücretsiz veya premium özel yazı tiplerini seçebileceğiniz çok sayıda kaynak vardır. Sunucunuza eklerken özel bir yazı tipi seçerken, onu kullanma hakkına sahip olduğunuzdan ve indirilebilir olduğundan emin olun.

Burada, Squirrel Fonts'tan ücretsiz özel font Milkshake'i indirdik.

Özel yazı tipinizi bir web yazı tipi biçiminde indirmeniz önemlidir. Webfont kapsayıcı biçimi WOFF, en çok tarayıcılar arası desteğe sahiptir, ancak Google, cihazlar arasında kullanıcılara tutarlı bir deneyim sağlamak için birden çok biçim sunmayı önerir.

Özel yazı tipinizi farklı bir biçime dönüştürmeniz gerekiyorsa, Squirrel Font, bunu yapmanızı sağlayacak ücretsiz bir Webfont Oluşturucu aracı sağlar.

2. Adım: Özel Yazı Tipini Sunucunuza Yükleyin

Bir sonraki adım, özel yazı tipinizi sunucunuza yüklemektir. Bunu yapmak için sitenizin cPanel'inde Dosya Yöneticisini açın.

Ardından aktif temalar klasörünüzde Fonts adlı yeni bir klasör oluşturun ve özel yazı tipinizi buraya yükleyin.

Yazı tipinizin birden çok biçimi varsa, hepsini Yazı Tipleri klasörüne yükleyin. Özel yazı tipiniz artık web alanınıza eklendi.

3. Adım: Özel Yazı Tipini Web Sitenize Uygulamak için CSS Kullanın

Artık özel yazı tipini web sitenize uygulamanız gerekiyor. Başlangıç ​​olarak, yazı tipini temanızın stil sayfasına yüklemeniz gerekir. Bunu yapmak için WordPress Özelleştirici'yi açın ve Ek CSS'nin altına şu kodu ekleyin:

 @yazı tipi-yüz {
    yazı tipi ailesi: Milkshake;
    src: url("https://jonesblogs.com/wp-content/themes/beauty-pro/fonts/milkshake.woff")
         format("woff");
}

Önemli olarak, yazı tipi adını ve URL'yi değiştirdiğinizden emin olun (sunucunuzdaki yazı tipi dosyasının URL'sini kopyalayın).

Ardından devam edebilir ve sitenizdeki yazı tiplerini güncellemek için CSS kurallarını kullanabilirsiniz. Özel yazı tipinin Başlık 3 ve paragraf bölümlerine nasıl uygulanacağına ilişkin bir örnek:

Yeni özel yazı tipinizin web sitenizde nasıl göründüğünden memnun kaldığınızda, Yayınla 'yı tıklayın.

WordPress'e Özel Yazı Tiplerinin Nasıl Ekleneceğine İlişkin Son Düşünceler

Gördüğünüz gibi, güzel ve dikkat çekici bir özel yazı tipi arıyorsanız, projeniz için mükemmel yazı tipini bulmanızı sağlayacak çok sayıda kaynak var. Dahası, artık WordPress'e özel yazı tiplerini başarılı bir şekilde nasıl ekleyeceğiniz bilgisi ile donanmış durumdasınız. Peki, hangi özel yazı tiplerini seçeceksiniz?

WordPress'e özel yazı tiplerinin nasıl ekleneceği hakkında sorularınız mı var? Lütfen aşağıdaki yorumlarda sorun…