Eklenti Olmadan WordPress'te İndirilen Yazı Tipleri Nasıl Kullanılır

Google Yazı Tipleri harika bir kaynaktır. Bu kadar yaygın olmadan önce, benzersiz yazı tipleri kullanan web siteleri yapmak gerçek bir acıydı. Ancak şimdi, birkaç tıklama ve bir kod parçası ile web siteniz Helvetic-eh'den Helvetic-awesome'a geçiyor . Peki ya sevdiğiniz yazı tipi Google Fonts ailesinin bir parçası değilse? İndirilen yazı tiplerini nasıl kullanacağınızı bilmeniz gerekiyor çünkü sakalınızın ruhuna hitap eden harika bir yenilikçi yazı tipi keşfettiniz.

Web sitenizde indirilen bir yazı tipini kullanmak, tıkla-tıkla-yapıştır-yapıştır kadar basit değildir. Bu zor bir süreç değil, aklınızda bulunsun ve bir daha asla, asla ve asla bir Helvetic-eh web sitesine sahip olmamanız için size yol göstereceğim.

Şimdi bunu bir eklenti ile yapabileceğinizi belirtmek istiyorum. Depoda bir avuç mevcut. Ama neden bunu yapmak isteyelim ki? Birkaç satır kod aynı şeyi yapacağı zaman eklenti kullanmaktan kaçınmayı tercih eden bir adamım. Fazla eklentiler tonlarca şişkinliğe, gereksiz HTTP isteklerine neden olur ve sitenizi yavaşlatır.

Bu yüzden bu yazı tiplerini elle içe aktaracağız, sanki 90'ların sonuymuş gibi. Evet.

Yazı Tipi Seçme ve İndirme

Yazı tipi toplamalarının büyük bir hayranıyım. Elegant Themes, neyi sevdiğinizi görmek için tarayabileceğiniz bir ton içerir. Bu yüzden bunlardan bazılarına basın ve neyi sevdiğinizi görün.

• El Yazısı Fontları
• Retro Yazı Tipleri
• Lüks Yazı Tipleri
• Cursive Yazı Tipleri
• Yenilikçi Yazı Tipleri
• Eğlenceli Yazı Tipleri

Benim için Hipster koleksiyonundan Aventura yazı tipiyle gidiyorum.

İlk adımınız, yazı tipi için indirme bağlantısını bulmak ve dosyayı bilgisayarınıza kaydetmektir. Muhtemelen çeşitli dosya biçimlerini içeren bir .zip dosyası olacaktır. Bulacağınız en yaygın olanlar .ttf (TrueType Font) veya .otf (OpenType Font).

Bir Web Fontu Yapma (Biraz İsteğe Bağlı, Ama Gerçekten Değil)

FontSquirrel, hiç kimsenin ve hiçbir tarayıcının sitenizin ihtişamıyla uyumsuz kalmamasını sağlamak için kullanabileceğiniz harika bir araca sahiptir. İndirdiğiniz çoğu yazı tipi yalnızca tek bir biçimde mevcut olacağından, FontSquirrel aracı bunu, yazı tipi yazarının dağıttıklarıyla sınırlı kalmamanız için yapar. Yazı tipini kullanma hakkınız olduğu sürece, ürününüzle/sitenizle çalıştığından emin olabilirsiniz.

Sadece en son indirdiğiniz yazı tipini yükleyin ve seçeneklerinizi seçin. Şahsen, yapabileceğim tüm yazı tipi biçimlerini elde etmek için Uzman seçeneklerini kullanıyorum. Diğerleri çalışır, ancak çok fazla dosya türü elde edemezsiniz, bu da her şeyin amacıdır.

FontSquirrel, bunları sitenize aktarmanız için gerekli CSS'yi sağlaması da harika. Bu nasıl kullanıcı dostu? Sadece kopyalayıp yapıştıracaksınız (aşağıda ele alacağız).

Yazı Tipinizi WordPress'e Yükleme

Bunu yaptıktan sonra, yazı tipini barındırma sağlayıcınıza yüklemeniz gerekecek. Bunu her zaman FTP üzerinden yapıyorum (FileZilla kullanıyorum, ancak istediğiniz istemciyi kullanabilirsiniz).

Sunucunuzun FTP bilgilerini bilmiyorsanız, cPanel'inize gidin ve Dosyalar -> FTP Hesapları altına bakın.

Orada ana bilgisayar için her FTP hesabını göreceksiniz ve ayrıca her birinin yanında bir FTP İstemcisini Yapılandır bağlantısı görmelisiniz.

Oraya girdiğinizde, cPanel size sunucu bilgilerini veya kimlik bilgilerinizi ayarlamak için içe aktarabileceğiniz bir FileZilla (ve diğerleri) dosyası verir. Ben manueli tercih ederim ama sen istediğini yaparsın. Dosyayı kullansanız bile, oturum açmak için parolaya ihtiyacınız olacak, böylece her iki yöntem de güvenli ve emniyetli olacaktır.

Artık FTP aracılığıyla sunucunuzda oturum açtığınıza göre, siteniz için /wp-content klasörünüze gidin. Bu, WordPress sitenizin içeriği olduğundan, neden oraya koymuyorsunuz? /wp-content/uploads içinde bile istediğiniz yere koymaktan çekinmeyin. Sen yapıyorsun.

FTP, dosyanızı yüklemek için süper kolaydır. İndirdiğiniz yazı tipi dosyasını bulun ve FileZilla'da sağ alt bölmeye sürükleyin. Bu, yüklemeyi başlatacaktır. Dizinde görmeniz bir saniyeden fazla sürmez.

Yukarıda bahsettiğimiz FontSquirrel aracını kullandıysanız, bunu onlardan indirdiğiniz tüm yazı tipi dosyaları için de yapacaksınız. Bunları saklamak istediğiniz yere sürükleyip bırakmanız yeterlidir.

Yazı Tipinizi CSS ile Kullanma

Yazı tipiniz şimdi yüklendi ve sıcak, rahat wp içeriği battaniyesine güvenli bir şekilde sokuldu. Gerekli CSS içe aktarımını temanıza eklemenin zamanı geldi.

FTP istemcinizde alt temanızın dizinine gidin (bir alt tema kullanıyorsunuz, değil mi?) ve style.css dosyasını bulun, sağ tıklayın ve varsayılan metin düzenleyicinize getirmek için Görüntüle/Düzenle'yi seçin.

Bir alt temanız yoksa, bunu mega-ultra hızlı yapmak için Orbisius Child Theme Creator'ı kullanın. Eklentiyi daha sonra silebilirsiniz. Bu şeyi seviyorum.

@ yazı tipi-yüz

Kullandığımız kod doğrudan FontSquirrel'den geliyor (kendi kodunuzu yazabilir veya aşağıdaki örneği kopyalayıp/yapıştırabilirsiniz) ve değiştirdiğim tek şey /wp-content öğesini içerecek URL yükleme yoluydu. Diğer her şey webfont oluşturucunun sağladığı şeydir.

Tüm bu @font-face betiğinin yaptığı, web sitenizin stil sayfalarına "hey, ahbap, bir ara kullanmak istersen bu yeni yazı tipini buraya koyuyorum" demek. Bilirsin, eve kek getirip birlikte yaşadığını insanlara söylemen gibi.

@font-face olmadan , font- family'yi çağırmaya çalışırsanız : 'aventurabold'; CSS tarafından, siteniz onu bulamaz çünkü onu nerede tuttuğunuz asla söylenmez.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Dosyayı kaydedin ve FileZilla üzerinden düzenlemek için açtığınız için, sunucudaki dosyayı değiştirmek isteyip istemediğinizi soran bir diyalog alacaksınız. Cevabınız açıkçası evet.

Şimdi tek yapmanız gereken custom.css'nize gitmek (veya Divi, Divi -> Tema Seçenekleri -> Özel CSS kullanıyorsanız , WP kontrol panelinizin gezinme bölmesinde.)

Diğer yazı tiplerinde yaptığınız gibi CSS stilini eklemeniz yeterlidir. Kullandığım 'Roboto' ve 'Exo' Google Yazı Tiplerini 'aventurabold' ile değiştirdim ve işler yolunda gitti (yukarıdaki @font-face içe aktarma sayesinde).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Emeklerimizin Meyveleri

İşte daha önce nasıl göründüğü:

Aventura'yı CSS'ye ekledikten sonra olanlar:

Yaşasın! İşe yarıyor! Aferin! Bize git!

İyi görünüyorsun, Friendo

Kaptan Malcolm Reynolds'ın bir zamanlar ünlü dediği gibi, "İmkansızı başardık ve bu bizi güçlü kılar." Pekala, tamam, yani bir yazı tipi yüklemek ve onu CSS aracılığıyla içe aktarmak, imkansızı başarmak anlamına gelmeyebilir, ancak kesinlikle birçok WordPress kullanıcısının yapmaya cesaret edemeyeceği bir şey yaptınız: eklenti olmadan temel işlevler eklemek.

Ve bu, dostlarım, sizi gerçekten güçlü kılıyor.

Peki, Google Yazı Tipi olmayan web'de kullanmak için en sevdiğiniz yazı tipi nedir? Bana yorumlarda söyle!

32 Piksel ile makale küçük resmi / Shutterstock.com