WordPress’te yazı tiplerini değiştirmek, sitenize biraz marka ve bireysellik eklemenin harika bir yoludur. Tipografi ve diğer marka öğeleri iyi bir ilk izlenim bırakır, sitenizin ziyaretçileri için bir atmosfer oluşturur ve markanızın kimliğini belirler. Ayrıca, yazı tiplerinin okuyanların öğrenme yeteneğini, bilgiyi hatırlama yeteneğini ve metinleri hafızada tutma yeteneğini etkilediğini gösteren araştırmalar da bulunmaktadır.
Eğer yeni bir WordPress teması yüklediyseniz veya biraz CSS ve kodlama deneyiminiz varsa, WordPress’te yazı tiplerini değiştirmek için kullanabileceğiniz birkaç seçeneği göstereceğiz.
WordPress’te Yazı Tiplerini Değiştirmek
WordPress’te yazı tiplerini değiştirmek için üç ana seçenek bulunmaktadır:
- Üçüncü taraf bir sitede barındırılan Google Fonts, Fonts.com veya Adobe Edge Web Fonts gibi web yazı tiplerini kullanın.
- Web yazı tiplerini tema içine kodlayın ve bunları sıralayın.
- Yazı tiplerini kendi sitenizde barındırın ve tema içine ekleyin.
Web Yazı Tiplerini Kullanarak WordPress’te Yazı Tiplerini Değiştirmek
Web yazı tipleri kullanmak, font dosyalarını indirip yüklemekten daha kolay ve hızlı bir şekilde WordPress’te yazı tiplerini değiştirmek için bir yoludur.
Bu seçenekle, her değişiklik olduğunda güncelleme yapmadan çeşitli yazı tiplerine erişebilir ve hostinginizde sunucu alanınızı doldurmaz. Yazı tipleri, bir eklenti kullanarak veya sitenize kod ekleyerek sağlayıcının sunucularından doğrudan alınır.
Marka kimliğinize uygun web yazı tiplerini seçtiğinizden emin olun. Bunlar, vücut metni için okuması kolay, web sitesi ziyaretçileri için tanıdık ve istediğiniz duygu ve imajı ileten yazı tipleri olmalıdır.
Web yazı tiplerini, bir WordPress eklentisi kullanarak veya sitenize birkaç satır kod ekleyerek manuel olarak ekleyebilirsiniz. Her iki seçeneği de keşfetmeye başlayalım.
WordPress Eklentisi Kullanarak Web Yazı Tiplerini Nasıl Ekleyebilirim?
Seçtiğiniz web yazı tipine bağlı olarak, eklenti kullanarak bu yazı tiplerine erişebilir ve sitenize istediğiniz yazı tipini ekleyebilirsiniz. Bu kılavuzda, Google Fonts’u seçtik ve Google Fonts Typography eklentisini kullandık.
- Başlamak için WordPress yönetici panonuzda oturum açın ve Eklentiler > Yeni Ekle’yi seçin.
- Arama kutusuna “Google Fonts Typography” yazın ve Şimdi Yükle’yi seçin.
- Etkinleştirmeyi seçin.
- Ardından, Görünüm > Özelleştir’e giderek Özelleştirici’ye erişin.
- Google Fonts bölümünü seçin.
Ardından, yazı tiplerinin ayarlarını açmak için bağlantıya tıklayın ve aşağıdaki şekilde yapılandırın:
Temel Ayarlar altında, vücut metni, başlıklar ve düğmeler için varsayılan yazı tipini belirtin.
- Gelişmiş Ayarlar altında, site başlığı ve açıklaması, menü, başlıklar ve içerik, kenar çubuğu ve altbilgiyi yapılandırın.
- Sayfanızın hızını düşürmemek için Yazı Tipi Yükleme bölümünde istenmeyen yazı tipi kalınlıklarını işaretlemeyi unutmayın.
- Yazı tiplerinizle ilgili sorunlar varsa, Sorun Giderme bölümünü kullanarak sorunları çözebilirsiniz.
- Bu ayarları test ederek, istediğiniz gibi çalıştıklarından emin olabilir ve ardından Yayınla’yı seçebilirsiniz.
Not: Özelleştiricide Yayınla’yı seçmeyi unutursanız, yaptığınız tüm değişiklikleri kaybedebilirsiniz.
Kodu Kullanarak Web Yazı Tiplerini Nasıl Ekleyebilirim?
Eğer temanızın kodlarına erişiminiz varsa, web yazı tiplerini kodlayabilir ve kullanabilirsiniz. Bu, ek bir eklenti eklemek yerine manuel bir alternatiftir, ancak adımları dikkatlice takip ederseniz karmaşık değildir.
Ancak, WordPress tema dizininden bir tema kullanıyorsanız, bir alt tema oluşturmalı ve ardından ona style.css ve functions.php dosyalarının yolunu vermelisiniz. Özelleştirilmiş bir tema kullanıyorsanız, stil sayfasını ve fonksiyonlar dosyasını temanızdan düzenleyebileceğiniz için işiniz biraz daha kolay olacaktır.
- Google Fonts kütüphanesinden bir yazı tipi seçin ve onu kütüphanenize eklemek için + (artı) simgesini seçin.
- Ardından, sitenize ekleyeceğiniz kodu bulacağınız alt sekme türüne gidin. Gömme sekmesi altında Embed sekmesinin altında Embed font bölümüne gidin. Google Fonts tarafından oluşturulan şu şekilde bir kod bulacaksınız:
html / <link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>
Not: Bu kılavuz için Work Sans yazı tipini seçtik, bu nedenle sizin seçtiğiniz yazı tipine bağlı olarak font adı farklı olabilir.
Bu kodun şu kısmını kopyalayın: https://fonts.googleapis.com/css2?family=Work+Sans Bu, stilinizi Google Fonts sunucularından çekmek yerine kendi sitenizde sıralamanıza izin verir ve üçüncü taraf eklentilerle çakışmayı önler. Ayrıca, gelecekte kolay değişiklikler yapmanıza da olanak tanır.
- Yazı tipini sıralamak için fonksiyonlar dosyasını açın ve aşağıdaki kodu ekleyin (Bağlantıyı Google Fonts’tan aldığınız bağlantıyla değiştirin):
php / function mybh_add_google_fonts() { wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’); wp_enqueue_style( ‘googleFonts’); } add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );
- Gelecekte daha fazla yazı tipi eklemek istiyorsanız, aşağıdaki gibi fonksiyona yeni bir satır ekleyebilirsiniz:
php / function mybh_add_google_fonts() { wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’); wp_enqueue_style( ‘googleFonts’); } add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ ); Bu durumda, hem Cambria hem de Work Sans yazı tiplerini sıralamış oluyoruz.
- Bir sonraki adım, yazı tiplerini sitenizin stil sayfasına eklemek için yazı tipi dosyanızı açmak ve şu kodu eklemektir:
css / body { font-family: ‘Work Sans’, sans-serif; } h1, h2, h3 { font-family: ‘Cambria’, serif; }
Bu durumda, ana yazı tipi Work Sans olacakken, başlık elementleri olan h1, h2 ve h3 Cambria’yı kullanacaktır. İşlemi tamamladıktan sonra stil sayfasını kaydedin ve yazı tiplerinizin istediğiniz gibi çalışıp çalışmadığını kontrol edin. Eğer sorun varsa, yazı tiplerinin stil sayfasında üzerine yazılmadığından veya tarayıcı önbelleğinizi temizleyip tekrar denemediğinizden emin olun.
- Yazı tipleri kolayca erişilebilir veya kullanılamazsa, özellikle eski cihazlara, kötü bağlantılara veya yazı tipi sağlayıcısının teknik sorunlarına sahip kullanıcılara karşı, yazı tiplerinizi kolayca render edilebilir veya erişilebilir yapmak için yedek bir yazı tipi belirleyin. Bunun için stil sayfasına gidin ve CSS’yi aşağıdaki gibi düzenleyin:
css / body { font-family: ‘Work Sans’, Arial, sans-serif; } h1, h2, h3 { font-family: ‘Cambria’, Times New Roman, serif; }
Her şey yolundaysa, sitenizin ziyaretçileri, örneğimizde olduğu gibi Work Sans ve Cambria gibi varsayılan web yazı tiplerini göreceklerdir. Sorunlar varsa, Arial veya Times New Roman gibi yedek yazı tiplerini göreceklerdir.
Ayrıca okuyun: