Özel WordPress Yazı Tipleri Nasıl Eklenir (Ve Eşleşen Yazı Tiplerini Seçin)

Yayınlanan: 2019-04-04

Sitenize kendi özel WordPress yazı tiplerinizi eklemenin bir yolunu mu arıyorsunuz?

WordPress temanız muhtemelen aralarından seçim yapabileceğiniz kendi yazı tipleriyle birlikte gelir, ancak seçenekler oldukça sınırlı olabilir, bu nedenle bunun yerine kendi WordPress yazı tiplerinizi eklemek istemeniz tamamen anlaşılabilir bir durumdur.

Bu yazıda, WordPress'te herhangi bir yazı tipini birkaç farklı yöntemle nasıl yükleyeceğinizi ve kullanacağınızı öğreneceksiniz.

Kendi WordPress yazı tiplerinizi kullanma fikrine aşina değilseniz, özel yazı tiplerini nerede bulacağınız ve bunları nasıl eşleştireceğiniz konusunda hızlı bir başlangıç yapacağız.

Ardından, aşağıdakilerden özel WordPress yazı tiplerini nasıl ekleyeceğinizi göstereceğiz:

Google Yazı Tipleri
Adobe Yazı Tipleri (Typekit)
Kelimenin tam anlamıyla başka bir yerde! (bir yazı tipi dosyası yükleyerek ve CSS3 @font-face kullanarak)

Doğrudan eğitimlere atlamak için bu bağlantıya tıklayın.

WordPress için Özel Yazı Tipleri Nerede Bulunur?

Özel WordPress yazı tiplerini bulmak için en iyi bilinen yer kesinlikle Google Yazı Tipleri'dir. Google Fonts'ta, tümü ücretsiz ve Google'ın CDN'si sayesinde WordPress sitenize entegre edilmesi çok kolay olan 900'den fazla fonttan oluşan bir havuz bulacaksınız.

Google Fonts'tan sonra, iyi bilinen başka bir seçenek de Adobe Fonts'tur ( eski adıyla Typekit ). Adobe Fonts, Adobe'nin Creative Cloud aboneliğinin bir parçası olarak ücretsiz olarak dahil edilir, ancak abone olmayanlar tarafından kullanılamaz.

Son olarak, ücretsiz ve premium yazı tiplerini bir araya getiren birçok başka site bulabilirsiniz. Bizim favorilerimizden ikisi:

Font Squirrel – ticari kullanım için %100 ücretsiz olan fontları toplar.
Fonts.com – büyük bir premium yazı tipi koleksiyonuna sahiptir.

Sitenizin Harika Görünmesi İçin Yazı Tiplerini Eşleştirme

Tipik olarak, WordPress sitenizde tek bir yazı tipi kullanmazsınız. Bunun yerine çoğu site, daha ilginç bir tasarım oluşturmak ve içeriği farklılaştırmaya yardımcı olmak için yazı tipi çiftleri kullanır.

Ancak, rastgele iki yazı tipini bir araya getirmek istemezsiniz - bu çok sıcak görünmeyebilir.

Bunun yerine, birlikte çalışan iki yazı tipine ihtiyacınız var ve eğer tasarımcı değilseniz bu yazı tipini anlamanız zor olabilir.

Yardımcı olmak için, sizin için yazı tipi çiftleri önerecek bir sürü harika site var. Örneğin, kesinlikle sevdiğiniz bir yazı tipi bulursanız, onun için bir çift bulmak için bu sitelerden birini kullanabilirsiniz. Bizim favorilerimizden bazıları:

Yazı Tipi Çifti
yazı keyfi
Tip.io

Yalnızca iki yazı tipi kullanabileceğinizi söyleyen bir kural olmasa da, çok fazla WordPress yazı tipi kullanmaktan kaçınmalısınız. Kaotik bir tasarım yaratma potansiyelinin ötesinde, çok fazla özel yazı tipi kullanmak sitenizin yüklenme sürelerini de yavaşlatabilir.

Özel WordPress Yazı Tipleri Nasıl Eklenir: Adım Adım Kılavuzlar

Şimdi eğlenceli kısım için - işte kendi özel WordPress yazı tiplerinizi kullanmaya nasıl başlayacağınız.

Yazı tiplerinizi nereden almak istediğinize bağlı olarak burada izleyebileceğiniz birkaç yol vardır.

İşte ele alacağımız üç yöntem. Yine, doğrudan belirli bir eğiticiye atlamak için bir bağlantıya tıklayabilirsiniz:

WordPress'e Google Yazı Tipleri ekleyin (eklenti, manuel veya yerel barındırma yöntemleri)
WordPress'e Adobe Fonts (Typekit) ekleyin
WordPress'te Herhangi Bir Yazı Tipi Yüklemek ve Eklemek için CSS3 @font-face kullanın

WordPress'e Google Yazı Tipleri Nasıl Eklenir?

Google Yazı Tipleri, özel WordPress yazı tipleri için en popüler kaynak olduğundan, Google Yazı Tiplerini WordPress'e eklemenin üç farklı yolunu ele alacağız:

Bir eklenti ile Google'ın CDN'sinden Google Yazı Tipleri ekleyin
Google Yazı Tiplerini Google'ın CDN'sinden manuel olarak ekleyin
Google Yazı Tiplerini bir eklenti ile WordPress'te yerel olarak barındırın

Bir Eklenti Kullanarak WordPress'te Google Yazı Tipleri Nasıl Eklenir

Google Fonts'un popülaritesi nedeniyle, WordPress'e Google Fonts eklemeyi son derece basit hale getiren birkaç kaliteli eklenti bulabilirsiniz, en sevdiğimiz şey Easy Google Fonts'tur çünkü:

Özgür
Hafif
Kullanımı kolay

Eklentiyi kurup etkinleştirdikten sonra, gerçek zamanlı WordPress Özelleştiriciyi başlatmak için WordPress panonuzda Görünüm → Özelleştir seçeneğine gidin.

Ardından, Google Fonts seçeneklerinizi belirlemek için Tipografi seçeneğine tıklayın:

Buradan, sitenizdeki her öğe için özel bir yazı tipi seçmek için seçenekleri kullanabilirsiniz:

Örneğin, paragraf yazı tipini değiştirmek şöyle görünür:

Eklenti, yazı tipini seçmenin yanı sıra şunları özelleştirmenize de olanak tanır:

Yazı tipi ağırlığı
Metin dekorasyonu
Renkler

Küçük bir CSS'de yolunuzu biliyorsanız, belirli öğeleri bir arada gruplandırmak için eklentinin Yazı Tipi Kontrolleri özelliğini de kullanabilirsiniz. Örneğin, tüm başlıklarınızı aynı anda hedeflemek için başlık seçicileri birleştirebilirsiniz.

Bunu ayarlamak için Ayarlar → Google Yazı Tipleri'ne gidin ve belirli CSS seçicilerini hedeflemek için yeni bir Yazı Tipi Kontrolü oluşturun:

Eklenti Olmadan WordPress'te Google Yazı Tipleri Nasıl Eklenir

Google, tüm yazı tiplerini kendi CDN'sinde barındırdığından, Google Yazı Tiplerini WordPress'e manuel olarak eklemek de oldukça kolaydır.

Temel olarak, yazı tipi dosyalarını sunucunuza yüklemek yerine, Google'ın barındırılan CDN'sine bağlantı verebilirsiniz ve Google, yazı tiplerini sizin için sunacaktır.

Bazı insanlar performans nedenleriyle bunu yapmaktan hoşlanmıyor – İsterseniz bir sonraki bölümde Google Fonts'u yerel olarak barındırmanın bir yolunu paylaşacağım .

Başlamak için, eklemek istediğiniz yazı tipini seçmek için Google Yazı Tipleri web sitesini kullanmanız gerekir.

Bu örnek için, Roboto kullanmak istediğinizi varsayalım .

Yazı tipinin sayfasına gidin ve + Bu Yazı Tipini Seç'i tıklayın:

Bu, sağ alt köşeye bir pencere ekleyecektir. Bu pencereyi genişletmek için tıklayın.

Ek yazı tipi ağırlıkları seçmek istiyorsanız ( örneğin kalın ve italik için ), Özelleştir sekmesine gidebilirsiniz. Kullanılabilirlik ve performans arasında iyi bir denge için, mutlak maksimumda üç yazı tipi ağırlığı seçmenizi öneririz:

Düzenli
İtalik
Gözü pek

En iyi performansı istiyorsanız daha azını bile kullanabilirsiniz .

Seçimlerinizi yaptıktan sonra Göm sekmesine dönün ve Göm Yazı Tipi kodunu kopyalayın:

Ardından, bu kodu WordPress temanızın <head> bölümüne eklemeniz gerekir. Bunu şu şekilde yapabilirsiniz:

Alt temanızın header.php dosyasını doğrudan düzenleyin ( bir alt tema kullandığınızdan emin olun - aksi takdirde, temanızı güncellediğinizde özel yazı tipleriniz kaybolur )
Insert Headers and Footers gibi ücretsiz bir eklenti kullanma

Kodu ekledikten sonra, CSS'nizde Google Yazı Tiplerini kullanmaya başlayabilirsiniz.

Google Fonts web sitesine geri dönerseniz, Google aslında kullanmanız gereken CSS kurallarını size söyleyecektir:

Örneğin, h2 etiketlerinizin yeni Roboto yazı tipinizi kullanmasını sağlamak için Görünüm → Özelleştir → Ek CSS'ye gidebilir ve aşağıdaki parçacığı ekleyebilirsiniz:

h2 {

yazı tipi ailesi: 'Roboto', sans-serif;

}

Bir Eklenti ile WordPress'te Google Yazı Tiplerini Yerel Olarak Nasıl Barındırırsınız?

İşte Google Fonts için son yöntem!

Bazı kişiler, Google Fonts'u Google'ın CDN'sinden yüklemek yerine yerel olarak barındırmayı tercih eder. Yani “https://fonts.googleapis.com/css?family=Roboto:400,700” gibi bir bağlantıdan yüklemek yerine dosyaları kendi sunucunuzda barındırabilirsiniz.

Bunu yapmanın en kolay yolu, Webfonts için CAOS adlı ücretsiz bir eklentidir.

Eklentiyi kurup etkinleştirdikten sonra, sunucunuza indirmek istediğiniz yazı tiplerini seçmek için Ayarlar → Web Yazı Tiplerini Optimize Edin seçeneğine gidebilirsiniz:

Bunu yaptıktan sonra, CSS'nizdeki yazı tiplerini (yazı tiplerini) kullanmaya başlayabilirsiniz ( tıpkı önceki yöntemi izliyormuşsunuz gibi ).

WordPress'te Adobe Fontları (Typekit) Nasıl Eklenir

Adobe Fonts'u WordPress'te kullanmak istiyorsanız, manuel Google Fonts yöntemiyle aynı adımları uygulayabilirsiniz. Adobe Fonts hizmetinin yalnızca Creative Cloud aboneliğinin bir parçası olarak sunulduğunu unutmayın .

Başlamak için, fontlarınızı seçmek ve bir web projesi oluşturmak için Adobe Fonts web sitesini kullanmanız gerekir ( ayrıntılı talimatlar burada ).

Web Projesine yazı tipi ekle penceresinde, hangi yazı tiplerinin dahil edileceğini seçebilirsiniz:

Ardından Adobe, tıpkı Google Fonts gibi size bir gömme kodu verecektir:

Bu yerleştirme kodunu alın ve alt temanızın header.php dosyasını veya Insert Headers and Footers gibi bir eklentiyi kullanarak sitenize ekleyin.

CSS dosyasına bağlandıktan sonra, sitenizdeki CSS seçicilere yazı tipini uygulamaya başlamak için Adobe'nin sağladığı CSS'yi kullanabilirsiniz:

WordPress'te @font-face Nasıl Kullanılır

Son olarak, size göstereceğimiz son yöntem, WordPress'te @font-face'in nasıl kullanılacağıdır. Bu yöntemle ilgili güzel olan şey , herhangi bir kaynaktan tam anlamıyla herhangi bir yazı tipi dosyasıyla çalışacak olmasıdır.

Temel olarak, yazı tipi dosyasını indirebildiğiniz ve onu kullanma haklarına sahip olduğunuz sürece, CSS3 @font-face bunu halledecektir.

Başlamak için, tercih ettiğiniz kaynaktan yazı tipi dosyasını indirin. Bu örnek için, Font Squirrel'den Alex Brush adlı ücretsiz bir yazı tipi kullanacağız.

Mümkünse, en iyi çapraz tarayıcı uyumluluğu için dosyayı .woff veya .woff2 dosya biçimlerinde indirmeyi deneyin. Bu mümkün değilse, yazı tipinizi farklı bir biçimde indirebilir ve ardından ücretsiz FontSquirrel Webfont Oluşturucu aracını kullanarak onu .woff'a dönüştürebilirsiniz:

Ardından, WordPress sitenizin sunucusuna FTP veya cPanel Dosya Yöneticisi aracılığıyla bağlanın. O zamanlar…

Aktif temanızın veya alt temanızın dizininde fontlar adında yeni bir klasör oluşturun ( bazı temalarda zaten bir font klasörü olabilir. Bu durumda, bunu atlayabilirsiniz ).
Yazı tipi dosyasını yazı tipleri klasörüne yükleyin. Hem .woff hem de .woff2 formatlarını yükleyebilirsiniz.

Dosyaları yükledikten sonra, WordPress panonuzda Görünüm → Özelleştir → Ek CSS'ye gidin.

İlk olarak, yazı tipinizi eklemek için @font-face kullanmanız gerekir…

Bunu yapmak için, font ailesi olarak fontunuzun adını girin ve URL olarak sunucunuzdaki font dosyasına doğrudan URL'yi ekleyin . AlexBrush örneğimiz için şöyle görünüyor:

@yazı tipi-yüz {

yazı tipi ailesi: AlexBrush;

kaynak: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

yazı tipi ağırlığı: normal;

}

Bunu yaptıktan sonra, yazı tipi ailenizi ( @font-face ile kaydettiğiniz adla) uygulamak için CSS'yi kullanabilirsiniz. Örneğin, <h2> üstbilgileri için AlexBrush yazı tipini kullanmanın nasıl göründüğü:

Ve bu kadar! Bu CSS3 @font-face yöntemini kelimenin tam anlamıyla herhangi bir yazı tipi dosyası için kullanabilirsiniz.

Özel WordPress Yazı Tipleri Üzerine Son Düşünceler

WordPress temanızda kullanmak istediğiniz yazı tipleri yoksa panik yapmayın! Kendi özel WordPress yazı tiplerinizi eklemek için birçok seçeneğiniz var.

Başlamanın en kolay yolu, Google Fonts'ta barındırılan ücretsiz yazı tiplerini veya Adobe Fonts'ta barındırılan premium seçenekleri kullanmaktır.

Ancak, hiçbir şekilde bu hizmetlerle sınırlı değilsiniz ve CSS3 @font-face kullanarak, kelimenin tam anlamıyla herhangi bir yazı tipi dosyasını WordPress'e yükleyebilir ve temanızda kullanmaya başlayabilirsiniz.

Şimdi dışarı çıkın ve kendi yazı tipi eşleştirmenizi yaratın!