WordPress Temasına Özel Yazı Tipleri Nasıl Eklenir?

Yazı tipleri, web sitenizin tasarımında, okunabilirliğinde ve hatta bazen işlevselliğinde önemli bir rol oynar. Yanlış olanı seçin ve aksi takdirde harika görünen bir web sitesini mahvedebilirsiniz. Aynı şekilde, hem yazı tipi stili hem de boyutu, web sitenizin kullanımının ne kadar kolay (veya başka türlü!) olduğunu belirleyebilir. Ancak ideal yazı tipiniz WordPress temanızda yoksa ne yaparsınız? Bu makalede, seçtiğiniz özel yazı tipini kullanmanın birkaç yolunu inceleyeceğiz.

Haydi gidelim!

Neden Özel Yazı Tiplerini Kullanmalısınız?

Artık birçok tema, aralarından seçim yapabileceğiniz 'pişmiş' yazı tipleriyle birlikte geliyor. Bunlar çoğu durumda tasarladığınız web sitesi için uygundur. Ancak, halihazırda sunulan yazı tipleriyle doğru yazı tipini seçemiyorsanız, alternatif yazı tiplerine bakmanın zamanı gelmiştir ve bu, web sitenize özel yazı tiplerinizi ekleyebilmeniz gerektiği anlamına gelir.

Özel yazı tiplerini kullanmak, tipografiyi ve kullanıcı deneyimini geliştirmek için web sitenizdeki farklı yazı tiplerinin güzel kombinasyonlarından yararlanmanıza olanak tanır. Araştırmalar, doğru tipografiyi kullanmanın önemli yararları olduğunu göstermiştir. Bu, yalnızca genel kullanıcı deneyimindeki bir gelişmeyi değil, aynı zamanda bir web sitesindeki bilgilerin beyin tarafından ne kadar iyi işlendiğini bile içerir. Bu ne kadar kolaysa, iş tekliflerinizi/hizmetlerinizi müşterilerinize iletmek o kadar kolay olur.

Özel yazı tiplerini kullanmak web sitenizin kullanılabilirliğini kesinlikle artırabilirken, yazı tipi çılgınlığına gitmemek önemlidir! Dikkatlice eşleştirilmiş iki yazı tipinden oluşan bir seçim yeterli olmalıdır. Daha fazlasını ve web sitenizi yavaşlatma riskini alabilirsiniz.

WordPress web sitemize özel yazı tipleri eklemek için elimizdeki seçeneklere bakalım.

Google Yazı Tipleri Eklentisi ile Google Yazı Tiplerini Ekleyin

WordPress web sitenize özel yazı tipleri eklemenin en kolay ve en popüler yolu, Kolay Google Yazı Tipleri Eklentisini kullanmak olmalıdır.

Bu eklentiyi kurup etkinleştirdikten sonra Görünüm > Özelleştir menüsü altında tema özelleştiricinizi açın. Sol kenar çubuğunda Tipografi adlı yeni bir akordeon açılır menüsünün eklendiğini fark edeceksiniz.

Bunu açmak için tıklayın ve ardından web sitenizin yazı tiplerini, ilgili ağırlıklarını, büyük harf olup olmadıklarını vb. ve daha fazlasını hızlı bir şekilde değiştirmek için 'Yazı Tipini Düzenle' düğmesini kullanabilirsiniz. Seçtiğiniz yazı tiplerinin stilini ve konumunu daha da değiştirmek için CSS özelliklerini de kullanabilirsiniz.

Ek olarak, kendi yazı tipi kontrollerinizi bile ekleyebilirsiniz. Bunu yapmak için Ayarlar > Google Yazı Tipleri altındaki eklenti ayarları sayfasına gidin.

Yeni bir yazı tipi denetimi oluşturun ve CSS seçicilerini tanımlayın. Örneğin, temamızın yazı başlıklarına karşılık gelen .entry-title sınıflarını belirledik. Ardından, özelleştiriciyi tekrar ziyaret ettiğinizde, yazı tipi özelleştirmesini yukarıda açıkladığımız şekilde yazı başlıklarına uygulamanız için belirtilen ada sahip yeni bir kutu mevcut olacaktır. Kolay!

Google Yazı Tiplerini Manuel Olarak Ekleyin

Bir eklenti kullanmamayı tercih ediyor, ancak yine de WordPress web sitenizde Google Yazı Tiplerini kullanmaktan yararlanmak istiyorsanız, sorun değil. Bunlar nispeten kolay bir şekilde manuel olarak eklenebilir. Nasıl olduğuna bir bakalım. Elbette web sitenize Google Yazı Tiplerini eklemenin manuel bir yolu da var.

Adım bir:

İlk olarak, yazı tipi bağlantınızı Google yazı tipleri sitesinden almalısınız.

Diyelim ki Roboto yazı tipi ailesini kullanmak istiyorsunuz. Bu yazı tipine tıkladığınızda, yazı tipinin size uygun olduğundan emin olmak için herhangi bir metni önizleyebilirsiniz. Sağ tarafta, bunu sitenize eklemek için ihtiyaç duyacağınız bağlantıyı içeren bir 'Web'de kullanım' kutusu göreceksiniz.

Google Fonts'u WordPress'te düzgün bir şekilde kuyruğa almak için, temanızın functions.php dosyasını favori düzenleyicinizle açın ve sonuna aşağıdaki kodu ekleyin:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Google Bağlantı metninde sağlanan URL'yi kopyalayın (https:// ile başlar) ve ardından bunu yukarıdaki kodda değiştirin (örneğimizde bu şu anda https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap şeklindedir) https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Ardından, temanızın style.css dosyasında, Google tarafından sağlanan "aileleri belirtmek için CSS kuralları"nı izleyerek yazı tipini diğer yazı tipleriyle yaptığınız gibi kullanın.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Şimdi sitenizin ön ucunda, CSS dosyanızda belirtilen alanlara uygulanan Roboto yazı tipini görmelisiniz.

Adobe Fontları Ekle

Google Fonts'a harika bir alternatif, Adobe Fonts'tan gelen fontlardır. Özel Adobe Yazı Tipleri eklentisi, bu yazı tiplerini WordPress web sitenize kolayca yerleştirmenize yardımcı olur ve şu anda Astra Teması, Beaver Builder Teması, Beaver Builder Eklentisi ve Elementor Sayfa Oluşturucu ile çalışır.

Başlamak için eklentiyi yükleyin ve ardından size uygun bir yazı tipi bulmak için Adobe'nin kapsamlı yazı tipi kitaplığına gidin (oturum açmak için kaydolmanız gerekir).

Yazı tiplerini filtrelemenin bir çok yolu vardır ve sistemin kullanımı oldukça sezgiseldir. Beğendiğiniz bir yazı tipi bulduktan sonra üzerine tıklayın ve sayfanın sağ üst köşesine bakın, burada 'Web projesine ekle' yazdığını göreceksiniz. Aşağıdaki gibi bir kutu açılacaktır. Web projenize bir ad verin ve buna dahil etmek istediğiniz yazı tipi çeşitlerini seçin.

Bir isim verdiğinizde ve 'Oluştur' düğmesine bastığınızda, bir HTML yerleştirme kodunun ve CSS kurallarının sağlandığı bir sonraki ekrana yönlendirileceksiniz. Artık iki seçeneğiniz var. a) Özel Adobe Yazı Tipleri eklentisini kullanmaya devam edebilir veya b) bu ​​yazı tiplerini manuel olarak gömebilirsiniz.

Özel Adobe Yazı Tipleri Eklentisini Kullanma

Adobe yazı tiplerinizi web sitenize çekmenin en kolay yolu budur. Projenizi oluşturduktan sonra, 'Web Projeleri'ne tıklayın ve projenizi listeden bulun. En üstte bir 'Proje Kimliği' kodu olduğunu göreceksiniz (aşağıda gösterildiği gibi). Şimdi, Adobe Font'un Eklenti ayarlarına gidin ve menüden 'Custom Typekit Fonts' seçeneğine tıklayın. Bu Proje Kimliğini bu kutuya girin ve kaydedin.

Artık bu yazı tipinin WordPress Özelleştirici, Elementor veya kullandığınız diğer uyumlu sayfa oluşturucuda listelendiğini göreceksiniz. Seçin ve gitmeye hazırsınız.

Özel Yazı Tiplerini Manuel Olarak Gömme

Adobe yazı tiplerinizi manuel olarak gömmek, Google yazı tiplerini gömmek için tarif ettiğimizle tamamen aynı şekilde yapılır. Web Projesine genel bakışta Adobe tarafından sağlanan (aşağıda gösterilmektedir) bir stil sayfası yerleştirme bağlantısı göreceksiniz. CSS sınıflarını görüntülemek için, 'Projeyi Düzenle' metnine tıklayın ve bunlar her yazı tipi stilinin yanında sağlanır.

Özel Yazı Tipleri Nasıl Bulunur ve Eşleştirilir

Ayrıca siteniz için ideal yazı tipini bulabilir ve indirebilir ve çok çeşitli ücretsiz veya premium yazı tipleri sağlayan çok sayıda kaynak olduğundan web sitenizin klasörlerinden yükleyebilirsiniz.

Yazı tiplerini uygun gördüğünüz şekilde karıştırıp eşleştirebilmeniz için yazı tipi kombinasyonlarını önizlemek için harika olan Yazı Tipi Çifti çevrimiçi aracından da yardım alabilirsiniz. Yazı tipi çiftlerini sunma şeklinin yanı sıra, göz atarak diğer eşleştirme önerilerini keşfetmek de kolaydır.

Blogumuzda, yazı tipi eşleştirmeyle ilgili iki harika makale de bulabilirsiniz. Web Tasarımcıları için Yazı Tipi Eşleştirme Kılavuzu + 30 Harika Örnek var! Neyi vurgulamanız gerektiği ve en iyi okunabilirlik ve hissi nasıl elde edeceğiniz konusunda harika bir danışmanlık ile tasarım açısından yazı tipi eşleştirme hakkında daha fazla bilgi edinmek isterseniz. Yazı tipi eşleştirme araçları hakkında daha fazla ayrıntı, Web Tasarımcıları için En İyi 10 Yazı Tipi Eşleştirme Aracı makalemizde bulunabilir.

Klasörlerden Özel Yazı Tiplerini Yükle

Google Yazı Tipleri ve Adobe Yazı Tipleri, aralarından seçim yapabileceğiniz harika bir seçim ve bunları web sitenizde kullanmanın kolay bir yolu olsa da, mükemmel yazı tipi arayışınızda size açık olan tek seçenek bu değil.

Tasarımcılar tarafından özenle oluşturulmuş özel yazı tiplerini satan birkaç mükemmel web sitesi var. Örneğin Font Squirrel, geniş bir font kütüphanesi sunar ve en önemlisi, bu fontlar için ticari kullanıma ve uygulaması kolay bir formata izin verir. Sitede ücretsiz ve 'premium' yazı tiplerinin bir karışımı vardır (ücreti ödenmesi gerekir).

Font Squirrel'den düşünmek isteyebileceğiniz harika bir font Fira Sans. Bunu, kullanım için WordPress web sitemize nasıl yükleyeceğinizi öğrenmek için bir örnek olarak kullanalım.

İlk olarak, 'Webfont Kit' sekmesine tıklayın. 'WOFF kutusunu işaretleyin ve ardından '@Font-Face kitini indir' seçeneğini tıklayın.

Şimdi çıkarılması gereken bir zip dosyası alacaksınız. Bu klasörde, kendi CSS stil sayfanız için ihtiyaç duyacağınız kodu içeren bir stil sayfası.css dosyasıyla birlikte yazı tipi dosyasını bulacaksınız.

Örneğin OpenSans-ExtraBold-webfont için aşağıdaki CSS'yi kullanmalıyız:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

En iyi seçeneğiniz, tüm formatlardaki tüm yazı tipi dosyalarını tema klasörünüzün altında seçtiğiniz uygun bir dizine yerleştirmektir. Örneğimizde, /wp-content/themes/twentytwenty/assets/fonts/open-sans/ klasörünün altındadır.

Aynı klasörün içinde bir open-sans.css dosyası oluşturun ve içeriği şöyle görünecek şekilde her stylesheet.css dosyasının tüm CSS kodunun içine yerleştirin:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Bu ayrıca çeşitli tarayıcıların desteklediği yazı tipini seçmesine yardımcı olur. Fontların CSS dosyasını WordPress yöntemiyle kuyruğa almanız gerekiyorsa, bunu function.php dosyasında şu şekilde yapmalısınız:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

URL'yi open-sans.css dosyanızın yolu ile değiştirmeyi unutmayın.

Çözüm

Web sitenizi oluştururken doğru yazı tipini seçmek, web sitenizin nasıl göründüğü ve çalıştığı üzerinde önemli bir etkiye sahiptir. Aralarından seçim yapabileceğiniz pek çok harika yazı tipiyle, yalnızca temanız tarafından sağlanan yazı tiplerine bağlı kalmanız gerektiğini düşünmeyin. Umarım bu makale, WordPress web siteniz için uygun herhangi bir yazı tipini nasıl kullanabileceğinizi gösterir!