WordPress Web Sitenize Özel Yazı Tiplerini Kolayca Nasıl Eklersiniz?

Web siteniz için doğru yazı tipini seçmek uzun ve zorlu bir görev olabilir. Dikkate alınması gereken birçok şey var – marka özünüze ne tür bir yazı tipi stilinin uyacağı, kaç farklı yazı tipi seçmeniz gerektiği, güvenli mi yoksa daha benzersiz ve zorlu bir şeye mi gideceğiniz ve liste uzayıp gidiyor. Yine de, iyi yazı tiplerinin kullanıcı deneyimi üzerinde ve dolayısıyla web sayfanızın genel başarısı üzerinde önemli bir etkisi olabileceğinden, sonuç genellikle tüm güçlüklere değer.

Şimdi özel yazı tiplerinden kesinlikle WordPress açısından bahsettiğimizi not etmek önemlidir. Bu durum “özel yazı tipi” terimini, bir müşteri için özel olarak tasarlanmış yazı tiplerine atıfta bulunan daha genel anlamda kullanmadığımız anlamına gelir. Bunun yerine, kutudan çıkar çıkmaz WordPress’e dahil olmayan yazı tiplerinden bahsediyoruz.

Günümüzde, özel yazı tipleri, birçok WordPress sitesinin her zaman var olan bir gücü haline geldi. Bu yüzden özel yazı tipleriyle birlikte gelen birçok WordPress teması vardır. Fakat sitenizde çok fazla özel yazı tipinin aktif olması web sitenizin hızını olumsuz etkileyebilir. Neyse ki, bundan kaçınmanın bir yolu var. WordPress sitenizi yavaşlatmadan özel web yazı tiplerini nasıl ekleyebileceğinizi göstermeye karar verdik. Aşağıda bununla ilgili daha fazla bilgi edinebilir veya bunun yerine videoyu izleyebilirsiniz.

Özel Yazı Tiplerini Bulma

Daha önce de belirttiğimiz gibi, siteniz için hangi yazı tiplerini kullanacağınızı seçmek zor olabilir. Nasıl yapacağınızdan emin değilseniz, web’de hem ücretsiz hem de lisanslı yazı tipi kaynakları vardır – örneğin Font Squirrel gibi. Bu durum web’in her yerinden ücretsiz, yüksek kaliteli yazı tipleri bulabileceğiniz ve bunları hem kişisel hem de ticari amaçlarla kullanabileceğiniz bir web sitesidir.

Font Squirrel dışında, Google Fonts, Envato, fonts.com ve Fontspace, tam olarak aradığınızı bulmanıza yardımcı olacak diğer pek çok yerden yalnızca birkaçıdır.

Web sitesi oluşturma sırasında, insanlar genellikle iki farklı yazı tipini seçer ve birleştirir – biri başlıklar için, diğeri gövde kopyası için. Deneyimli bir tasarımcı değilseniz ikiden fazla yazı tipi seçmeniz önerilmez çünkü bu, sayfanızın dağınık görünmesine ve sayfa yükleme sürenizin yavaşlamasına neden olabilir. Hangi yazı tiplerini birlikte kullanacağınızdan emin değilseniz, FontPair bir karar vermenize ve sizin için mükemmel kombinasyonu bulmanıza yardımcı olabilir. Orada farklı font çifti önerilerine göz atabilir ve söz konusu fontların adlarını ve birlikte düzenlendiğinde nasıl görüneceğini anında görebilirsiniz. Ayrıca yazı tipi çiftini yerinde indirme seçeneğiniz de vardır. Site, Font çiftlerini Öne Çıkan Çiftler, Serif/Sans Serif, Display/Sans Serif vb. gibi belirli kriterlere göre aramanıza izin verir.

Yazı Tipi Çifti

Fontjoy, yazı tipi çifti seçiminizde size yardımcı olabilecek başka bir sitedir. Yazı tiplerini oluşturmak için tıklayabileceğiniz bir Oluştur düğmesi vardır ve bunların ne kadar yakından ilişkili olduğunu belirleyebilirsiniz. Ayrıca zaten bir yazı tipi seçmişseniz, başka bir yazı tipi oluşturabilir ve seçtiğiniz yazı tipiyle nasıl eşleştiğini görebilirsiniz. Yapmanız gereken tek şey, istenen yazı tipinin yanındaki kilit simgesine tıklamaktır, böylece yazı tipi oluşturucu hangisini koruyacağını ve hangisini oluşturacağını bilecektir.

Yazı tipi

WordPress Temaları ile Özel Yazı Tiplerini Kullanma

WordPress’in premium WordPress temalarından birini kullanıyorsanız (veya kullanmayı planlıyorsanız), bunların zaten entegre edilmiş Google Fonts ile birlikte geldiğini bilmelisiniz. Dolayısıyla, Google’ın devasa yazı tipi kitaplığından herhangi bir Google yazı tipini kullanmak isterseniz endişelenmenize gerek yok.

Temalarımızda, söz konusu temanın seçeneklerine erişirseniz ve ardından Yazı Tipleri’ne tıklarsanız, yazı tipi ayarlarını bulabilirsiniz.

WordPress Temaları, entegre Google Yazı Tipleri ile birlikte gelir

Temanıza başka bir özel yazı tipi eklemek istiyorsanız, bunu bu makalenin “Eklenti olmadan özel WordPress yazı tipleri ekleme” bölümünde açıklanan yöntemlerden birini kullanarak yapabilirsiniz. Öte yandan, temalarımızı kullanmıyorsanız, fakat yine de bir Google Font’a sahip olmak istiyorsanız, bunu nasıl yapacağınızı aşağıda bulabilirsiniz.

Bir Eklenti Kullanarak WordPress Web Sitenize Özel Yazı Tipleri Nasıl Eklenir?

Bir eklenti ile WordPress’e özel bir yazı tipi eklemek basittir. Bunu iki farklı eklenti ile nasıl yapacağınızı göstereceğiz.

1. Google Yazı Tipleri Tipografisi

Google Yazı Tipleri Tipografisi

Bu eklenti zaten entegre edilmiş Google yazı tipleriyle birlikte gelir, bu nedenle herhangi bir yazı tipi yüklemeniz gerekmez – sadece kullanmak istediklerinizi seçmeniz gerekir.

Google Yazı Tipleri Tipografi eklentisini yükledikten sonra, Görünüm > Özelleştir > Google Yazı Tipleri’ne giderek seçeneklerine erişebilirsiniz.

Google Yazı Tipleri Ayarları

Kullanabileceğiniz iki farklı ayar grubu vardır – Temel ve Gelişmiş ayarlar.

Temel ayarlarda üç farklı seçeneğiniz vardır: Temel Tipografi, Başlık Tipografisi ve Düğmeler ve Girişler Tipografisi. Temel Tipografi seçeneği, gövde metninizin yazı tipini (sitenizde en çok görünen metin) seçmenize ve yapılandırmanıza olanak tanır. Başlıklar Tipografi seçeneği, tüm başlıklarınız için yazı tipini seçmek içindir, Düğmeler ve Girişler Tipografisi ise giriş alanlarınız ve düğmeleriniz için bir yazı tipi seçmenize olanak tanır.

Google Fonts Tipografi - Temel Ayarlar

Daha kapsamlı seçenekler için Gelişmiş Ayarlar da vardır. Oradayken, her başlık için ayrı bir yazı tipi seçebileceksiniz (site başlığı ve açıklaması için yazı tipleri, gönderi ve sayfa başlığı ve alt başlıklar, kenar çubuğu ve altbilgi gibi).

Google Fonts Tipografi - Gelişmiş Ayarlar

Eklentinin, yazı tipi boyutunu, rengini ve satır yüksekliğini özelleştirme yeteneği, yalnızca kullanmayı planladığınız yazı tipi ağırlıklarını yükleyerek web sitenizin performansını optimize etme seçeneği gibi birkaç başka seçenekle birlikte gelen bir Pro sürümü de vardır. eklentinin ayarları buna göre ayarlayabilmesi ve ihtiyaçlarınız için daha kişisel hale getirebilmesi için istediğiniz özel öğeleri eklemenin yanı sıra.

2. Kolay Google Yazı Tipleri

Kolay Google Yazı Tipleri Eklentisi

Easy Google Fonts eklentisini yükledikten sonra, Görünüm > Özelleştir > Tipografi > Varsayılan Tipografi’ye gidin.

Kolay Google Yazı Tipi Eklentisi Tipografisi

Bu eklenti yalnızca paragraflar ve başlıklar için yazı tiplerini değiştirmenize izin verir, alt bilgi, kenar çubuğunuz ve diğer web sitesi bölümleri için değil. Fakat Yazı Tipi Ağırlığı/Stil, Metin Dekorasyonu, Metin Dönüştürme, Yazı Tipi Boyutu vb. gibi bazı ek özellikleri ayarlayabilirsiniz.

Kolay Google Fonts Eklentisi Tipografi Ayarları

Yalnızca paragraflarınız ve başlıklarınız için yazı tiplerini değiştirebilseniz de, yazı tipini değiştirmek istediğiniz özel metin bölümleri ekleyebilirsiniz. Örneğin blok alıntılar ve bağlantılar için tipografiyi değiştirmek istediğinizi söyleyin. Bunu yapmak için, bu kategoriler için özel alanlar eklemeniz yeterlidir. Size nasıl olduğunu göstereceğiz.

Ayarlar > Google yazı tipleri’ne gidin.

Eklenti Genel Ayarları

Hem blok alıntılar hem de bağlantılar için aynı yazı tipini istiyorsanız, bir Yazı Tipi Kontrolü oluşturmanız gerekir. Bunu Kontrol Adı alanına bir ad girip ardından Yazı Tipi Kontrolü Oluştur düğmesine tıklayarak yapabilirsiniz.

Yazı Tipi Denetimi Oluşturma

Daha sonra hem bağlantılar hem de blok alıntılar için HTML etiketlerini aynı font kontrolüne koymalısınız (etiketler blok alıntı ve a’dır). Bittiğinde, Yazı Tipi Kontrolünü Kaydet’e tıklayın.

Yazı Tipi Denetimini Kaydet

Bu yeni yazı tipi kontrolünü oluşturduğunuzda ek ayarlar alacaksınız. Görünüm > Özelleştir > Tipografi’ye gittiğinizde, Tema Tipografisi adlı başka bir sekme göreceksiniz. Burada seçtiğiniz etiketler için tüm ayarları bulacaksınız.

Tema Tipografisi

Alacağınız ayarlar, varsayılan yazı tipi denetimleriyle aynı olacaktır.

Eklenti Olmadan Özel WordPress Yazı Tipleri Ekleme

Özel WordPress yazı tiplerini manuel olarak eklemenin yolları vardır ve bunu yapmak gerçekten çok kolaydır. Bunu yapmak için bazı temel CSS bilgilerine ihtiyacınız var, fakat bu adımları izlerseniz yanlış gidemezsiniz. Aşağıda, bir eklenti kullanmadan özel WordPress yazı tiplerini eklemek için iki farklı yöntem göstereceğiz.

Yöntem 1

İlk olarak Google Fonts’a gidin ve aklınızdakilerle en iyi eşleşen yazı tipini bulun. İstediğiniz yazı tipini seçtiğinizde, onu web sayfanıza yerleştirmek için gereken tüm bilgileri alacaksınız.

Yazı tipini web sayfanıza gömme

Daha sonra kodu header.php dosyanıza eklediğinizden emin olun. Görünüm > Tema Düzenleyici’ye gidin, header.php dosyasını bulun ve kodu etiketin hemen altına ekleyin. Seçtiğimiz Indie Flower yazı tipinin kodu aşağıdaki gibidir:

<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">

Kodu header.php dosyanıza ekleyin

Şimdi style.css dosyasını bulmanız gerekiyor. Erişmek için Kontrol Panelinizde Görünüm > Tema Düzenleyici’ye gidin ve style.css’yi seçin. Orada, yazı tipini uygulamak istediğiniz öğeleri tanımlayacaksınız. Yani, H1 başlığı için belirli bir yazı tipi istiyorsanız, o zaman bu, style.css dosyasına ekleyeceğiniz şeydir:

h1 {
font-family: ‘your font name goes here’, cursive;
}

Yazı tipinizi sitenizin herhangi bir bölümüne aynı şekilde ekleyebilirsiniz. Yazı tipini değiştirmek istediğiniz öğenin CSS seçicisini bilmeniz yeterlidir.

Alternatif olarak, yazı tipinin nerede görüneceğini tanımlayabileceğiniz başka bir yer vardır. Özelleştir > Ek CSS’ye tıklayın. Buradan tüm değişiklikleri yerinde izleyebilirsiniz.

Ek CSS Ekle

Yöntem 2

WordPress’e özel yazı tipleri eklemenin en basit yöntemi, web sayfanızda istediğiniz herhangi bir yazı tipini kullanmanıza izin veren CSS3 @font-face kullanmaktır. Öncelikle ve en önemlisi, kullanmak istediğiniz yazı tipini web dosyası biçiminde indirmeniz gerekir. Biçime sahip değilseniz, FontSquirrel Webfont Generator ile kolayca dönüştürebilirsiniz.

Daha sonra yazı tipi dosyalarınızı barındırma sunucunuza yüklemeniz gerekir. Dosyaları alt temanızın dizinine veya temanın içindeki yeni bir klasöre yükleyebilirsiniz. Yazı tipini yüklemek için FTP veya cPanel’in Dosya Yöneticisini kullanabilirsiniz.

Yazı tipini yükledikten sonra, onu temanızın CSS stil sayfasına yüklemelisiniz. Bunu yapmak için CSS3 @font-face kuralını kullanacaksınız:

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

Yazı tipinin adını, sunucunuzdaki konumunu ve yazı tipi ağırlığını belirtmeniz gerekir. Oradan, bu yazı tipini sitenizin herhangi bir yerinde basit bir CSS ile kullanabilirsiniz:

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

Çözüm Yolu

Sitenize özel WordPress yazı tiplerini bu şekilde eklersiniz. Gördüğünüz gibi kullanabileceğiniz pek çok farklı yöntem var ve bunların hiçbiri aşırı derecede karmaşık değil. Öyleyse devam edin, hoşunuza giden bir yazı tipi (veya yazı tipi çifti) seçin, onu WordPress sitenize ekleyin ve tipografinizi güzel, temiz ve dikkat çekici hale getirmek için özelleştirmeye başlayın.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Birlikte Büyüyen Bir İş Kurma Fırsatı!

İş birliği yaparak, işinizi yalnızca bir adım öteye taşıyoruz. Daha detaylı bilgi isterseniz mail adresinizi bize iletebilirsiniz.