Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Typekit ile WordPress’e Harika Tipografi Nasıl Eklenir?

Tasarımcıların sitelerinde güzel özel web yazı tiplerini nasıl kullanabildiklerini hiç merak ettiniz mi? Genellikle, yüksek kaliteli yazı tiplerine erişmenizi sağlayan bir Adobe hizmeti olan Typekit’i kullanarak WordPress’e özel yazı tipleri ekliyorlar. Bu makalede, tipografinizi geliştirmek için WordPress’e Typekit yazı tiplerini nasıl ekleyeceğinizi göstereceğiz.

Typekit Fonts in WordPress

Neden Typekit Yazı Tipleri Kullanılmalı?

Typekit, size çok para kazandırabilecek popüler bir abonelik tabanlı font hizmetidir. Oldukça pahalı olabilen tek tek font lisansları için ödeme yapmak yerine, yüzlerce fonttan oluşan tüm kütüphanelerine ücretsiz olarak veya yıllık sabit bir ücret karşılığında erişebilirsiniz.

Typekit kütüphanesi 1.000’den fazla fonttan oluşan devasa bir koleksiyondur. Web’de bulabileceğiniz en güzel fontlardan bazıları bir Adobe hizmeti olan Typekit’te mevcuttur.

Temel ücretsiz planları 230’dan fazla yazı tipine erişimle birlikte gelir ve bir web sitesinde 2 yazı tipi ailesini ücretsiz olarak kullanabilirsiniz. Diğer planlar yıllık $49.99 ile $99.99 arasında değişiyor.

Bu harika Typekit yazı tipleri, sayfa yükleme hızlarınızı yavaşlatmadan herhangi bir web sitesine kolayca eklenebilir. Fontlar Adobe’nin CDN’sinden sunulur ve kendi sitenizde barındırmanızdan çok daha yüksek hızlarda yüklenir.

WordPress için Typekit Video Eğitimi

Subscribe to WPBeginner

Videoyu beğenmediyseniz veya daha fazla talimata ihtiyacınız varsa, aşağıda okumaya devam edebilirsiniz.

WordPress’te Neden Özel Web Yazı Tipleri Kullanılmalı?

Tipografi, sitenizin tasarımında çok önemli bir rol oynar.

Doğru yazı tiplerini seçmek, kişiliğinizi ve mesajınızı okuyucularınıza net bir şekilde iletecektir. Ne tür bir imaj yansıtmak istediğiniz önemli değil – profesyonel, arkadaş canlısı, rahat, deneyimli – web sitenizdeki yazı tipleri doğru imajı yansıtmanıza yardımcı olabilir.

Doğru yazı tipi setini kullanarak kalıcı bir etki bırakabilirsiniz. Web’deki diğer tüm siteler gibi görünmek yerine, metniniz belirgin şekilde farklı görünür. WordPress siteniz için uygun yazı tipini seçmek, web sitenizi basit bir tasarımdan estetik açıdan hoş ve çarpıcı bir sanat eserine dönüştürebilir.

Doğru özel web yazı tipleri şunları yapabilir:

  • dönüşüm oranlarını artırın
  • sitenizin hemen çıkma oranını düşürün
  • web sitenizde geçirilen süreyi artırın
  • kullanıcılar için unutulmaz bir deneyim yaratın

Typekit yazı tiplerini kullanmaya başlamaya hazır mısınız? WordPress tasarımınızı özelleştirmek için Typekit’i nasıl kullanacağınızı buradan öğrenebilirsiniz.

Typekit ile Nasıl Başlanır

Öncelikle bir Typekit hesabı oluşturmanız gerekir. Bunu yapmak için Typekit.com adresini ziyaret ederek mevcut planları karşılaştırın.

Hangi plana kaydolmak istediğinizi seçmeniz gerekir. Ücretsiz plan sizi bir web sitesiyle sınırlar ve sınırlı yazı tiplerine erişim içerir. Denemek için ücretsiz planla başlamak ve daha sonra yükseltmek isteyebilirsiniz. Yükseltme size daha geniş bir yazı tipi kitaplığı sağlar ve bunları daha fazla web sitesinde kullanabilirsiniz.

Typekit Subscription Plans

Bir sonraki adım bir kit oluşturmaktır. Kit, web siteniz için belirli bir yazı tipi ve ayar kitaplığını bir araya getirmenizi sağlar, böylece Typekit yalnızca gereken dosyaları ve kodu yükler. Kitinizi oluşturmak için site adınızı ve alan adınızı ekleyin ve ardından Devam‘a tıklayın.

Creating a kit for your site

Kitiniz için bilgilerinizi doldurduktan sonra Typekit size sitenize eklemeniz için bir JavaScript kodu verecektir. Bu kodu kopyalayıp Not Defteri gibi bir metin düzenleyicisine yapıştırarak şimdilik kaydedebilirsiniz. Bu öğreticinin bir sonraki adımında sitenize ekleyeceğiz.

Şimdilik fontlarınızı seçmeye başlayabilirsiniz. Font kitaplığına göz atabilir ve sınıflandırma, ağırlık, genişlik, x-yüksekliği ve daha fazlası gibi seçeneklere göre filtreleyebilirsiniz.

Choosing a font from Typekit library

Beğendiğiniz bir yazı tipi gördüğünüzde, daha fazla ayrıntı ve örnek için üzerine tıklayabilirsiniz. Fontu web kitinize eklemek isterseniz, sağ taraftaki Web Kullanımı: Sağ taraftaki Kit’e Ekle düğmesine tıklayın.

add a typekit font to your web kit

Bu, seçtiğiniz yazı tipini yeni oluşturduğunuz kite eklemeniz gereken bir açılır pencere getirecektir.

adding your custom web font to a kit

Şimdi değişiklikleri kitinize kaydetmek için Yayınla düğmesine tıklayabilirsiniz.

publish your kit to save your changes

Hepsi bu kadar! Yazı tipi kitiniz artık kullanıma hazır.

Typekit Yazı Tiplerinizi WordPress’e Ekleme

Yeni özel web yazı tiplerinizi WordPress blogunuza eklemenin en kolay yolu bir WordPress Typekit eklentisi kullanmaktır.

Typekit Fonts for WordPress eklentisini öneriyoruz. Eklentiyi kurup etkinleştirdikten sonra, eklentiyi yapılandırmak için Ayarlar ” Typekit Yazı Tipleri’ni ziyaret edebilirsiniz.

using a wordpress typekit plugin to customize fonts

Öncelikle Typekit gömme kodu alanına daha önce kaydettiğiniz JavaScript kodunu yapıştırmanız gerekir. Bundan sonra, yazı tipini sitenizde nerede kullanmak istediğinizi belirtmek için CSS seçicileri ekleyebilirsiniz.

Yukarıdaki ekran görüntüsünde yazı tipini h1.site-title CSS seçicisine ekledik.

WordPress temanız farklı öğeler için farklı sınıflar kullanabilir. Bu CSS sınıflarını bulmak için web tarayıcınızdaki Öğeyi İncele aracını kullanmanız gerekir. Başlamanıza yardımcı olması için yeni başlayanlar için WordPress tarafından oluşturulan CSS hile sayfamıza da göz atmak isteyebilirsiniz.

Using Inspect Element tool in Google Chrome to find CSS classes

Hepsi bu kadar! Umarız bu makale Typekit ile WordPress’e nasıl harika tipografi ekleyebileceğinizi öğrenmenize yardımcı olmuştur. WordPress temalarınıza Google web yazı tiplerini nasıl ekleyeceğinizle ilgili rehberimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

6 yorumBir Cevap Bırakın

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Forest Antemesaris

    This list worked for me, so thanks! But the italics aren’t true italics, but are oblique. Is there a way to make the italics true italics?

    • WPBeginner Support

      It would depend on the specific font, you would want to reach out to Typekit’s support and they should be able to assist.

      Yönetici

  3. Jes

    Same request here. I have installed the Typekit plugin and gone through all the processes to add fonts to my site, but the fonts are not available in the inline text editor and drop-down menu list :-(

    • George Galbraith

      Divi doesn’t support an easy way to add fonts to the inline text editor or dropdown. You’ll need to take the old fashioned route and still define your font size/weight/font for h1-h6/p in the css field in theme customizer.

      Then us the tags to apply the fonts in the inline editor. Hope this helps!

  4. Michael

    Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin :)

    I am wondering how to add the font to the in-liine editor and drop-down menus of my theme (DIVI) using Typekit and custom fonts (not Google).

    Do you have any suggestions?

    Cheers!

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.