WordPress’e özel yazı tipleri nasıl eklenir
WordPress’e özel bir yazı tipi eklemek ister misiniz? Özel yazı tipleri, kullanıcı tipografisi ve deneyimini geliştirmek için web sitenizdeki çeşitli yazı tiplerinin güzel kombinasyonlarını kullanmanıza olanak tanır. İyi görünmenin yanı sıra, özel yazı tipleri de okunabilirliği geliştirmenize, marka görüntüleri oluşturmanıza ve web sitenizde kullanıcılar tarafından harcanan zamanı artırmanıza yardımcı olabilir. Bu makalede, Google yazı tipi, TypeKit ve CSS3 @font-face yöntemini kullanarak WordPress’e nasıl özel yazı tipleri ekleyeceğinizi göstereceğiz.
Not: Çok fazla yazı tipi yükleme web sitenizi yavaşlatabilir. İki yazı tipi seçmenizi ve bunları tüm web sitelerinizde kullanmanızı öneririz. Ayrıca, web sitenizi yavaşlatmadan nasıl düzgün yükleyeceğinizi de göstereceğiz.
WordPress’e nasıl özel bir yazı tipi ekleyeceğinizi görmeden önce, kullanabileceğiniz özel bir yazı tipi bulmaya bakalım. WordPress yazı tiplerinde kullanılmak üzere özel bir yazı tipi nasıl bulunur, pahalıdır, ancak artık artık değil. Google Fonts, TypeKit, Fontsquirrel ve Fonts.com gibi iyi ücretsiz web yazı tiplerini bulmak için birçok yer vardır. Yazı tiplerini nasıl karıştıracağınızı ve eşleştireceğinizi bilmiyorsanız, yazı tipi çiftlerini deneyin. Bu, tasarımcıların güzel Google yazı tiplerini bir araya getirmelerine yardımcı olur. Bir yazı tipi seçtiğinizde, çok fazla özel yazı tipi kullanmanın web sitenizi yavaşlatacağını unutmayın. Bu yüzden iki yazı tipi seçmeli ve tasarımınız boyunca kullanmalısınız. Bu aynı zamanda tasarımınıza da tutarlılık getirecektir.
Video öğretici
WPBeginner’a abone olun
Videoları sevmiyorsanız veya yazılı yönergeleri tercih ediyorsanız, lütfen okumaya devam edin. Google yazı tipinden WordPress’e özel bir yazı tipi ekleyin
Google Fonts, web sitesi geliştiricileri arasında en büyük, ücretsiz ve en yaygın kullanılan yazı tipi kitaplığıdır. WordPress’e Google yazı tipini eklemenin ve kullanmanın birkaç yolu vardır. Yöntem 1: Google Font eklentisini kullanarak özel yazı tipleri ekleyin, web sitenizde Google yazı tiplerini eklemek ve kullanmak istiyorsanız, bu yöntem şu ana kadar yeni başlayanlar için en kolay ve önerilir. Yapmanız gereken ilk şey kolaylığı yüklemek ve etkinleştirmektir Google Fonts eklentisi. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Aktivasyondan sonra görünüşe gidebilirsiniz »özelleştirici sayfası. Bu, yeni bir tipografik bölüm göreceğiniz doğrudan tema ayar arayüzünü açacaktır.
Tipografi tıklamak, Google yazı tipini uygulayabileceğiniz web sitesinin çeşitli bölümlerini görüntüleyecektir. Düzenlemek istediğiniz bölümün altındaki ‘Yazı Tiplerini Düzenle’yi tıklamanız yeterlidir.
Font Family bölümü altında, web sitenizde kullanmak istediğiniz Google yazı tipini seçebilirsiniz. Yazı tipi stili, yazı tipi boyutu, dolgu, marj ve diğerlerini de seçebilirsiniz.
Temanıza bağlı olarak, buradaki parça sayısı sınırlı olabilir ve web sitenizin çeşitli alanları için yazı tipi seçimini doğrudan değiştiremeyebilirsiniz. Bunu düzeltmek için eklentiler, kendi kontrolünüzü yapmanıza ve web sitenizdeki yazı tiplerini değiştirmek için kullanmanıza izin verir. İlk olarak, Ayarlar »Google Yazı Tipi sayfasını ziyaret etmeniz ve yazı tipi kontrolünüz için bir ad vermeniz gerekir. Bu yazı tipi kontrolünü nerede kullanacağınızı hızlı bir şekilde anlamanıza yardımcı olan bir şey kullanın.
Ardından, ‘Yazı Tipi Kontrolü Oluştur düğmesini’ tıklayın ve ardından CSS.anu girmeniz istenecektir. Değiştirmek istediğiniz belirli alanlar tarafından hangi CSS sınıfının kullanıldığını öğrenmek için tarayıcınızda bir muayene aracı kullanabilirsiniz.
Şimdi ayarlarınızı kaydetmek için ‘Yazı Tipi Kontrolünü Kaydet’ düğmesini tıklayın. Web sitenizin çeşitli bölümleri için ihtiyacınız olan kadar çok yazı tipi denetleyicisi yapabilirsiniz. Bu yazı tipi denetleyicisini kullanmak için görünüşe gitmeli »özelleştirici ve Tipografi sekmesine tıklamanız gerekir. Tipografi altında, artık ‘Tipografik Tema’ seçeneğini de göreceksiniz. Tıklamak, daha önce yaptığınız özel yazı tipi kontrolünü görüntüler. Artık yazı tiplerini seçmek için Düzenle düğmesini tıklayabilirsiniz ve bu kontrol için görüntüleyebilirsiniz.
Değişikliklerinizi kaydetmek için Kaydet veya Yayınlan düğmesine tıklamayı unutmayın. Yöntem 2: Google yazı tipini WordPress’e manuel olarak ekleyin Bu yöntem, kodu WordPress tema dosyanıza eklemenizi gerektirir. Bunu daha önce hiç yapmadıysanız, WordPress’e kodu nasıl kopyalayacağınız ve ekleyeceğiniz konusunda kılavuzumuza bakın.
İlk olarak, Google yazı tipi kitaplığını ziyaret edin ve kullanmak istediğiniz yazı tipini seçin. Ardından, yazı tipinin altındaki Hızlı Kullan düğmesini tıklayın.
Ardından, Sematan kodunu kopyalamak için yan çubuğundaki ‘sabitlenmiş’ sekmesine geçmeniz gerekir. Bu kodu WordPress sitenize eklemenin iki yolu vardır. İlk olarak, Header.php dosyanızı düzenleyin ve etiketinden önce kodu ekleyin. Ancak, WordPress’te kodun düzenlenmesine alışık değilseniz, bu kodu eklemek için eklentiyi kullanabilirsiniz. Ekleme üstbilgileri ve altbilgi eklentisini yükleyip etkinleştirmeniz yeterlidir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Etkinleştirmeden sonra, Ayarlar sayfasını aç »Üstbilgiyi ve altbilgiyi ekleyin ve gömme kodu ‘Başlıktaki Komut Dosyası’ kutusuna yapıştırın. Değişikliğinizi kaydetmek için Kaydet düğmesini tıklamayı unutmayın. Eklenti artık Google yazı tipi gömme kodunu tüm web sitesi sayfalarınıza yüklemeye başlayacaktır. Bu yazı tipini şunun gibi tema stil sayfanızda kullanabilirsiniz: .H1 Site-Title {
Yazı tipi ailesi: ‘açık sans’, arial, sans-serif;
}
Daha ayrıntılı talimatlar için, WordPress temasına Google Fonts’un nasıl ekleneceğine dair kılavuzumuza bakın. TypeKit kullanarak WordPress’e özel bir yazı tipi ekleyin
Adobe Fonts tarafından TypeKit, tasarım projenizde kullanabileceğiniz şaşırtıcı yazı tipleri için başka bir serbest kaynak ve primdir. Ücretli bir abonelik ve kullanabileceğiniz sınırlı ücretsiz paketleri var.
Sadece Adobe Fonts hesabına kaydolun ve Font’u Keşfetme’yi ziyaret edin. Buradan yazı tipini seçmek ve bir proje oluşturmak için düğmesini tıklamanız gerekir.
Ardından, proje kimliğinizle Sematan kodunu göreceksiniz.Bu aynı zamanda tema CSS’de yazı tiplerinin nasıl kullanılacağını da gösterecektir.Bu kodu bölümünüze kopyalamanız ve eklemeniz gerekir. Bu kodu WordPress sitenize eklemenin iki yolu vardır.İlk olarak, Header.php dosyanızı düzenleyin ve etiketinden önce kodu ekleyin.Ancak, WordPress’te kodun düzenlenmesine alışık değilseniz, bu kodu eklemek için eklentiyi kullanabilirsiniz.
Ekleme üstbilgileri ve altbilgi eklentisini yükleyip etkinleştirmeniz yeterlidir.Etkinleştirmeden sonra, Ayarlar sayfasını aç »Üstbilgiyi ve altbilgiyi ekleyin ve gömme kodu ‘Başlıktaki Komut Dosyası’ kutusuna yapıştırın.
Hepsi bu, artık WordPress tema stil sayfanızda seçtiğiniz yazı tipi yazı tipini kullanabilirsiniz: H1. Site-Title {
Yazı tipi ailesi: Gilbert, sans-serif;
}
Daha ayrıntılı talimatlar için, TypeKit kullanarak WordPress’e muhteşem tipografi nasıl ekleyeceğiniz konusundaki eğitimimize bakın. CSS3 @Font-Face kullanarak WordPress’te özel bir yazı tipi eklemek, WordPress’e özel yazı tipleri eklemenin en doğrudan yolu CSS3 @font-face yöntemini kullanarak yazı tipleri eklemektir. Bu yöntem, web sitenizde istediğiniz yazı tipini kullanmanıza olanak tanır. Yapmanız gereken ilk şey, web formatında sevdiğiniz yazı tipini indirmektir. Yazı tipiniz için bir web formatınız yoksa, bir webfont fontsquirrel jeneratörü kullanarak dönüştürebilirsiniz. Bir webfont dosyanız olduğunda, WordPress barındırma sunucunuza yüklemeniz gerekir. Yazı tiplerini yüklemek için en iyi yer, çocuğunuzun tema dizinindeki veya temasındaki yeni “Yazı Tipi” klasöründedir. Yazı tiplerini yüklemek için cpanelinizden FTP veya Dosya Yöneticisi kullanabilirsiniz. Yazı tiplerini yükledikten sonra, css3 @font-face kurallarını kullanarak tema stil sayfanıza yazı tipleri yüklemeniz gerekir: @font-face {font-family: arvo;
SRC: URL (http://www.example.com/wp-content/themes/your-tiheme/fonts/arvo-regular.ttf);
yazı tipi-ağırlık: normal;
}
Yazı tiplerini ve URL’lerini mülkünüzle değiştirmeyi unutmayın. Bundan sonra, bu gibi tema stil sayfanızda herhangi bir yerde yazı tipini kullanabilirsiniz: .H1 Site-Title {
Yazı tipi ailesi: “Arvo”, Arial, sans-serif;
}
