WordPress’te yazı tipleri nasıl değiştirilir
Sitenizi ayarlamak ve tipografiyi değiştirmek ister misiniz? Bu makalede, sitenizin profesyonel ve şık görünmesi için WordPress’teki yazı tiplerini nasıl değiştireceğinizi göstereceğiz. Önemli web sitesi tipografisi. Sitenize sadece belirli bir stil vermekle kalmaz, aynı zamanda kullanıcı deneyimleri oluşturabilir veya yok edebilir. Yazı tipiniz kullanıcı dostu değilse, ziyaretçiler sitenizden ayrılma eğilimindedir. Kullandığınız tipografi, sitenizle iletişim kurmaya çalıştığınız şeylerle eşleşmelidir. Siteniz danışmanlık hizmetleri veya fotoğraf siteleri satıyor mu? Tahmin edebileceğiniz gibi, bu iki web sitesi tarafından kullanılan temalar ve yazı tipleri çok farklıdır.
Google yazı tipi kitaplığında kullanılmak üzere bazı ücretsiz yazı tipleri görebilirsiniz. Proxima-Nova gibi premium bir yazı tipi arıyorsanız, TypeTit’i Adobe ile kontrol etmelisiniz. Her iki yazı tipi kütüphanesi, işletmenize uygun birçok kullanıcı dostu yazı tipi ile birlikte gelir. WordPress’te Yazı Tipleri Nasıl Değiştirilir WordPress’te yazı tiplerini değiştirmek için çeşitli yöntemler vardır:
WordPress Varsayılan Seçenekler (Gutenberg/Classic Editor)
CSS ile manuel olarak
Özel bir eklenti kullanma
Kendi barındırma yazı tipiniz
Web yazı tipi entegrasyonu
Bu kılavuzda, siteniz için en iyisini seçebilmeniz için her adım adım yöntem göstereceğiz.
1) Varsayılan WordPress Seçenekleri Varsayılan olarak, WordPress tipografiyi ayarlamak için iki seçenek sunar: Gutenberg ile veya klasik bir düzenleyici kullanın. 1.1) Gutenberg ile WordPress’in en son sürümü yeni bir editör: Gutenberg editörü ile birlikte geliyor. Bu, birkaç blokla donatılmış ve kullanımı çok kolay olan sofistike bir araçtır. Yazı tipini değiştirmek için gönderiyi veya sayfayı açın ve değiştirmek istediğiniz metni seçin.
Küçük
Şu anda
Büyük
Çok büyük
Alışkanlık
Belirtilen boyutlardan birini seçebilir veya özel bir boyut ekleyebilirsiniz. Örneğin, 20px’i yazı tipi boyutu olarak seçersek, editörde değişiklikler göreceğiz.
Bu şekilde, bloğunuzu kolayca değiştirebilir ve bunun için özel bir yazı tipi boyutu ayarlayabilirsiniz. 1.2) Klasik bir editör kullanarak Tipografiyi klasik bir editör aracılığıyla yönetmeyi tercih ediyorsanız, Gelişmiş Editör Araçları (Tinymce Advanced) eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Eklentiyi etkinleştirdikten sonra içerik düzenleyicinizi açın ve bazı ek araçlar göreceksiniz. Açılır listeden, yazı tipinin türünü ve boyutunu değiştirebilirsiniz. Sitenizi ayarlamayı seçebileceğiniz birkaç Google yazı tipi ve boyutu vardır. Bu seçenekle, herhangi bir paragraf seçebilir ve açılır listeden herhangi bir yazı tipi ve boyutu seçebilirsiniz. 2) Manuel olarak özel bir CSS kodu ile WordPress’te yazı tipinizi değiştirmenin başka bir yolu özel bir CSS kodu kullanmaktır. Varsayılan olarak, tema site boyunca geçerli olan belirli bir yazı tipi boyutu ile birlikte gelir. Ancak, bazen sitenizde farklı bir stil vermek için ayarlamak isteyebilirsiniz. Bunu yapmak için önce, WordPress kontrol panelinizde, görünümden açın> Özelleştir> Ek CSS. Bu bölümde, özel bir kod ekleyebilir ve sitenizi düzenleyebilirsiniz. Örneğin gövde yazı tipini değiştirin, vücudunuzun yazı tiplerinin boyutunu 16 piksel olarak değiştirmek için, bu CSS kodunu kullanmanız gerekir:
gövde {yazı tipi boyutu: 16px; }
Paragraf yazı tipini de değiştirin, paragraf yazı tipinin boyutunu 16 piksel olarak ayarlamanın bir yolunu arıyorsanız, bu CSS kodunu kullanmalısınız: p {font-boyut: 16px; } Başlık yazı tipini ayarlayın Ayrıca, başlık yazı tipi boyutunu değiştirmeniz gerekiyorsa, aşağıdaki kodu kullanabilirsiniz: .Entry-Content H2 {font-boyut: 36px; } .Entry-Content H3 {yazı tipi boyutu: 30px; } .Entry-Content H4 {yazı tipi boyutu: 26px; } .Entry-Content H5 {yazı tipi boyutu: 22px; } .Entry-Content H6 {yazı tipi boyutu: 20px; } Bu sadece bir örnektir, bu nedenle yazı tipi boyutunu ihtiyaçlarınıza göre ayarladığınızdan emin olun. Bu değişikliği yapmak için ayarlamaları kullandığımızda, değişiklikleri doğrudan sağ tarafta görebilirsiniz. Ayarlamadan memnun kaldığınızda, değişikliği kaydet ve Publish tuşuna basın. Yazı tipi ailesini değiştirin, Site genelinde yazı tipi ailesini değiştirmek için şu kodu kullanabilirsiniz: * {Font-Family: “Verdana”, Verdana, Sans-Serif} Yıldız İşareti ( *) tüm sitelerde değişiklikler uygular, Dolayısıyla, sadece belirli sayfalara veya yayınlara değişiklik uygulamak istiyorsanız, kodu silin. CSS yazı tipi hakkında daha fazla bilgi için bu siteye bakın. Ayrıca, yazı tipi stilini de değiştirebilirsiniz. Örneğin, bir başlık 2 ve 3 italik yapmak istiyorsanız, şu kodu kullanın: H2, H3 {font-style: italics; } Temanızda benzer değişiklikler uygulamak istiyorsanız, kodunuzu doğrudan çocuğunuzun temasından style.css dosyasına yazabilirsiniz. Bunun Site genelinde değişiklikler uygulayacağını unutmayın, bu nedenle devam etmeden önce sitenizin tam bir yedeklemesini yaptığınızdan emin olun.
3) Eklentinizle, özel bir eklenti ile WordPress’teki yazı tiplerini de değiştirebilirsiniz. Bu bölümde, Google yazı tipini sitenizle nasıl entegre edeceğinizi göstereceğiz. Yapmanız gereken ilk şey kolay Google Fonts eklentisini yüklemek ve etkinleştirmektir. Bundan sonra web sitenizi yazı tipinizi değiştirebilirsiniz. Açık görünüm> Özelleştir ve özelleştiriciden, web sitenizin tipografisini kontrol edebileceksiniz. Sol tarafta, tipografi adı verilen yeni bir ayar seçeneği göreceksiniz. Seçin ve paragraflar ve başlık için tüm tipografileri değiştirmek için çeşitli seçeneklere sahip bir ekran göreceksiniz.
Paragraf yazı tipinizi değiştirmek istediğinizi söyleyin, bu nedenle yazı tipi düzenleme seçeneğini açın. Oradan değiştirebilirsiniz: Script/alt küme
Font ailesi Yazı tipi ağırlığı
Metin dekorasyonu
Metin dönüşümü
Yazı tipi ekranını değiştirmeniz gerekiyorsa, değiştirebileceğiniz bir sonraki sekmeyi açın:
Mektup rengi
Arka plan rengi
Harf büyüklüğü
Satır yüksekliği
Mektuplar Alanı
Son olarak, Konumlandırma sekmesinden:
Sınırlamak
Katman Sınır
Sınır yarıçapı
Görüntülemek
Ayarlama seçeneği yazı tipini değiştirmek, tipografinizi bir sonraki seviyeye getirmek için çok iyidir. Örneğin, WordPress sitenizdeki yazı tipi ailesini değiştirmek istersiniz. Stiller sekmesinden kullanmak istediğiniz yazı tipini seçin.
Belli bir yazı tipi aileniz varsa, arama özelliğini kullanabilirsiniz. Bu gösteri için yazı tipi çalışması sans kullanacağız.
Bu değişikliği yapmak için WordPress ayarlamalarını kullandığımız için, her güncelleme doğrudan incelemede görülecektir. Örneğin, varsayılan tema yazı tipini sans olarak değiştirdiğimizde, gerçek zamanlı değişiklikleri görebiliriz. Aynı şekilde, yazı tiplerinin ağırlığını, metin dekorasyonunu ve dönüşümünü ve başlığınızı da değiştirebilirsiniz.Paragraf yazı tipi özelleştirmesiyle bitirdikten sonra, yazı tipi başlığı seçeneğine geçin. Listeden herhangi bir başlık seçebilirsiniz, ancak bu öğretici için 1’e odaklanacağız. Daha önce yaptığımız gibi, yazı tipi ailesini değiştireceğiz.Bu durumda, Roboto levhasını seçeceğiz. Bu basit yöntemi izleyerek paragrafınızı ve başlık yazı tipinizi değiştirebilirsiniz. Bu eklenti entegre Google yazı tipinin çoğuyla birlikte geldiğinden, aralarından seçim yapabileceğiniz birçok seçeneğiniz var. Ayrıca, tüm işlemin her kullanıcı tarafından erişilebilmesi için Kuvvet Ayarlama seçeneğinin kullanımı çok kolaydır. 4) Kendi yazı tipi barındırma Yerel bilgisayarınızda bazı özel yazı tipleriniz varsa, web sunucunuzda gönderebilirsiniz. Bu bölümde, kendi yazı tiplerinizi nasıl barındırabileceğinizi ve WordPress’teki tipografinizi nasıl değiştirebileceğinizi göstereceğiz. Bunu yapmak için, özel bir klasör oluşturmak ve yazı tipleri yüklemek için web dosyası sunucusu yöneticinize erişmeniz gerekir. En popüler WordPress barındırma şirketlerinden birini kullanırsanız, kullanımı kolay olan CPanel’e erişiminiz olabilir. Veya, Kinsta veya WP Engine gibi yönetilen barındırma hizmetlerini kullanıyorsanız, FileZilla veya Özel Dosya Yöneticisi eklentileri gibi FTP istemcilerini kullanmanız gerekir. Bu demo için bir evreleme ortamı kullanacağız, bu nedenle temel dosyaları değiştirmek ve özel dosyaları yüklemek oldukça kolay olacaktır. Yazı tipinizi doğrudan tema klasörünüze yüklemeden önce, yönetimi kolaylaştırmak için Fonts adlı yeni bir klasör oluşturmanız gerekir. Ardından, kolay erişilebilirlik için tüm özel yazı tiplerinizi bu klasöre yükleyebilirsiniz. Bir klasör oluşturduktan sonra açın. Burası özel yazı tipi dosyanızı yükleyeceğiniz yerdir. Şimdi, kullanmayı planladığınız yazı tipini bulmanız gerekiyor. Bu gösteri için Google yazı tipinden bir yazı tipi dosyası olan Lato’yu kullanacağız, ancak istediğiniz yazı tipini seçebilirsiniz. Yazı tipini seçtikten sonra, özel bir sayfaya yönlendirileceksiniz ve orada aile indirme düğmesini göreceksiniz. Düğmeye bastıktan sonra, yazı tipi ailesi bilgisayarınıza .zip dosyası olarak indirilecektir. Zip’i açın ve dosyayı yazı tipi klasörünüze yükleyin. Bu ilk adım. Şimdi nasıl daha ileri gideceğinizi ve yazı tiplerinizi temanızla nasıl entegre edeceğinizi görelim. Yazı tipinizi CSS ile entegre edin, bu yazı tipini temanıza küçük bir özel CSS ile entegre etmeye başlayabilirsiniz. WordPress ayarını açın, ek CSS bölümünü açın ve CSS kodunu aşağıdan kopyalayın. @font-face {font-family: ‘lato’; SRC: URL (“Fonts/lato-medium.ttf”) biçimi (‘woff’); / * orta */ yazı tipi ağırlığı: normal; yazı tipi tarzı: normal; } @font-face {font-family: ‘lato’; SRC: URL (“Fonts/lato-burd.ttf”) biçimi (‘woff’); / * orta */ yazı tipi-ağırlık: kalın; yazı tipi tarzı: normal; } CSS kodunu görürseniz, üç ana şeyden bahsettiğini göreceksiniz. Font ailesi Kaynak URL Yazı tipi ağırlığı Bu CSS kodunu özelleştiricinize eklediğinizde, seçtiğiniz yazı tipine bağlı olarak birkaç parçayı güncellemeniz gerekir. İlk olarak, yazı tipi ailesini güncellemeniz gerekir. Kodumuzda, Lato bir yazı tipi ailesidir, bu nedenle onu seçtiğiniz yazı tipiyle değiştirmeniz gerekir. Başlıkta bir yazı tipi ailesi bulabilirsiniz. Bundan sonra, yazı tipine giden yolu ayarlamanız gerekir. Yukarıda açıklanan adımları izlediyseniz, Fonts adlı bir klasöre bir yazı tipi dosyası yüklediniz. Bu yüzden sadece SRC satırını değiştirin: url (“fontlar/latod.ttf” fonts/fontn-name.ttf ile ve bunu yapmaya hazırsınız. Ayrıca, yazı tipi ağırlığını ihtiyaçlarınıza göre değiştirebilirsiniz. Paragraflar için yazı tipleri kullanırsanız, normal yazı tipi ağırlığı işlev görür, ancak değeri de değiştirebilirsiniz. Buna ek olarak, aşağıdaki CSS kodu ile başlık yazı tipinizi değiştirebilirsiniz: H1 {Font-Family: ‘Lato’, Georgia, Serif ;} Ve paragraf yazı tipinizi değiştirmek istiyorsanız, bu CSS kodunu kullanın: p {font-family: ‘Lato’, Georgia, Serif; }
Öte yandan, tüm web sitesi yazı tiplerinizi değiştirmeniz gerekiyorsa, bu CSS kodunu kullanın: Body {Font-Family: ‘Lato’, Georgia, Serif; }
Bu şekilde, WordPress’teki yazı tiplerini kolayca değiştirebilirsiniz. Gördüğünüz gibi, bu, kodlama bilginizden bağımsız olarak uygulanması kolay olan yeni başlayan dost bir yöntemdir. 5) Web yazı tiplerinin entegrasyonu Web yazı tiplerini entegre etmek, WordPress’teki yazı tiplerini ayarlamanın bir başka kolay yoludur. Sunucumuza yazı tipleri göndermek yerine, üçüncü taraf yazı tiplerini, yazı tipleri sunan benzersiz bir bağlantı aracılığıyla çağıracağız. Web yazı tiplerinin entegrasyonu ile ilgili iyi olan, herhangi bir yazı tipini manuel olarak yayınlamanız ve herhangi bir FTP yazılımına bağlı olmanızdır. Web yazı tiplerinin entegrasyonu için önce Google yazı tipini açın ve istediğiniz yazı tiplerini ve stilleri seçin.
Sağ tarafınızda, yazı tipini sabitlemek için kodu göreceksiniz. Kopyala.
Bizim durumumuzda, yazı tipi kodu: Ardından, fontları çağırmak için fonksiyon.php dosyanızı düzenlemeniz gerekir.Ancak ondan önce, kodu ayarlamanız gerekir.İhtiyacınız olan tek şey, bizim durumumuzda: https://fonts.googleapis.com/css2?Family = spartan URL’yi aldıktan sonra, function.php dosyanızı açın.Tema çekirdek dosyalarını değiştirmek için bir alt tema veya eklenti kullanabilirsiniz.Ardından, aşağıdaki kodu yapıştırın.Function quadLayers_add_google_fonts () {wp_register_style (‘GoogleFonts’, ‘https://fonts.googleapis.com/css2?family=spartan’);wp_enqueue_style (‘GoogleFonts’);} Add_action (‘wp_enqueue_scripts’, ‘quadLayers_add_google_fonts’);Not: Seçtiğiniz yazı tipiyle URL’yi değiştirdiğinizden emin olun.
Ardından, WordPress Gösterge Tablosunda görünüm> Özelleştir> Ek CSS’ye gidersiniz ve yazı başlığı yazı tipini değiştirmek için aşağıdaki CSS kodunu yapıştırırsınız. Not: Kullanmak istediğiniz yazı tipi sitenizle entegre edilmelidir. Entry-Titles {font-family: ‘lato’, Georgia, Serif; } Kodu web sitenizde kullanmak istediğiniz yazı tipine ayarlayın. İşte burada! Bu şekilde, belirli alanlarda yazı tiplerini kolayca değiştirebilirsiniz. Bunun için doğru CSS sınıfını kullandığınızdan emin olun, aksi takdirde çalışmaz. Yazı tiplerinin renginin nasıl değiştirilmesi, yazı tiplerini değiştirmenin yanı sıra, benzersiz bir site oluşturmak ve ziyaretçilere daha iyi bir kullanıcı deneyimi sağlamak için yazı tipinin rengini değiştirmek isteyebilirsiniz. İyi haber şu ki, herhangi bir eklenti kullanmadan başarabilirsiniz. Basit bir CSS kodu kullanarak sitenizdeki yazı tipi rengini nasıl değiştirebileceğinize bakalım. Diyelim ki bunun gibi birkaç başlık içeren bir sayfanız var: Başlığın rengini değiştirmek için, önce uygun CSS sınıfını bulmanız gerekir. Örneğin, H2 yazı tipinin rengini değiştirmek için sınıfı doğru tutarak ve incelemeye basarak bulmalısınız.
Bu durumda, CSS sınıfı .Entry-Content H2’dir. Bundan sonra özelleştirici WordPress’i açtıktan sonra, CSS ek bölümünü girin ve aşağıdaki CSS kodunu yapıştırın: .Entry-content H2 {color: #f542f5; }
Gördüğünüz gibi, 2 başlık rengi kırmızıya döner. Bu şekilde, tüm başlıklarınızı da değiştirebilirsiniz. Tek yapmanız gereken, H2’yi istediğiniz başlık etiketi ile değiştirmek. Veya paragraf yazı tipinizi değiştirmek istiyorsanız, bu CSS kodunu kullanın: .Entry-content p {color: mavi; }
Kodu temel olarak kullanın ve sitenizin her bir parçası için istediğiniz rengi seçin. İşte burada! Yazı tipinin rengini kolayca değiştirebilirsiniz. Web sitelerinden ve diğer ilginç seçeneklerden yazı tipleri nasıl tanımlanır Web’i keşfettiğinizde web sitelerinden ve resimlerden yazı tiplerini tanımlayabilmektir. Site tarafından kullanılan tipografiyi bulmanın çeşitli yolları vardır. En kolay yol bir tarayıcı denetim aracı kullanmaktır. Beğendiğiniz yazı tipini bulduktan sonra, yazı tipini içeren metne sağ tıklayın ve incelemeyi açın (bazı tarayıcılarda Web Geliştirici> Geliştirici aracını açmanız gerekebilir). Elementin vurgulanacağını ve müfettişte stil ve düzeni görebileceğinizi göreceksiniz. Bundan sonra, hesaplanan sekmeyi açın ve web sitesi yazı tipini göreceğiniz yazı tipleri alanlarını bulun. Ayrıca, WhatTheFont adlı bir araç kullanarak görüntülerden yazı tiplerini tanımlayabilirsiniz. Web sitelerinden ve resimlerden yazı tipleri hakkında bilgi nasıl alınacağınız hakkında daha fazla bilgi için, yazı tiplerini nasıl tanımlayacağınızla ilgili kılavuzumuzu okumanızı öneririz. Sonuç Genel olarak, sitenizdeki tipografiyi ayarlayarak, sitenize rakiplerinizden öne çıkacak şekilde farklı bir stil verebilir ve sitenizde kullanıcı deneyimini geliştirebilirsiniz. Bu kılavuzda, WordPress’te yazı tiplerini değiştirmek için çeşitli yöntemler gördük: Varsayılan Editör (Gutenberg ve Klasik Editör)
Özel CSS kodu Eklentilerle Kendi barındırma yazı tipiniz Web yazı tipi entegrasyonu
