Bir WordPress web sitesine özel yazı tiplerinin nasıl ekleneceğini öğrenmek ister misiniz?

Neden standart yazı tiplerini kullanarak blogunuzu sıkıcı hale getiresiniz? Blogunuzun canlı kişiliğiniz ve çok çeşitli özel yazı tipleriyle ele aldığınız konular hakkında konuşmasına izin verin. Özel yazı tipleri, blogunuzun başkalarına tercih edilir görünmesini sağlayan harika bir özelliktir.

Kabul edelim; hepimiz doğru yazı tiplerine sahip blogları ve web sitelerini seviyoruz. Yalnızca web sitesini dekore etmekle kalmaz, aynı zamanda kullanıcıyı içeriğinize çekmeye yardımcı olurlar. Ancak, standart WordPress yazı tiplerinin seçimi sınırlıdır ve kullandığınız temaya bağlıdır. İyi haber şu ki, bunları manuel olarak veya WordPress eklentileri uzman.

Ve burada iki soru ortaya çıkıyor: özel yazı tipleri nereden alınır WordPress için ve özel yazı tipleri nasıl yüklenir Web sitenizde.

öğrenelim.

Neden özel yazı tiplerini kullanmalıyım?

Times New Roman ve Georgia'nın web sitelerindeki metinler için tek yazı tipi olarak kabul edildiği günler geride kaldı. Son birkaç yılda, yazı tipi alanı, aşağıdaki gibi yazı tiplerinin ortaya çıkmasıyla tamamen değişti. Google Fonts ve diğerleri.

Bugün internette yüzlerce ücretsiz yazı tipi, bilgi ve eğitim yardımı ve tasarım kaynağı bulunmaktadır. Adobe Illustrator, Photoshop ve diğer klasik uygulamaların aksine WordPress, varsayılan yazı tipleri üzerinde tam kontrol sağlamaz. Yalnızca belirli WordPress temaları özel yazı tiplerini desteklemeyi ve kullanmayı seçer.

Bu nedenle, bu makalede, uygun özel yazı tiplerini nasıl bulacağınızı ve bunları WordPress web sitenizde nasıl kullanacağınızı öğreneceksiniz.

Özel yazı tiplerini kullanmanın önemi

Yazı tiplerini, sözcük girintisini, satır aralığını, harf aralığını veya yazı tipi doygunluğunu neden değiştiriyorsunuz? Ancak bazı araştırmalar gösteriyor ki tipografi okuduğunu anlamayı geliştirir.

Çoğu, yazı tiplerinin yapısına bağlıdır. Bilinçli ve bilinçaltı düzeyde - herkes bir web sayfasının içeriğini tasarım gereği değerlendirir.

Yazı tipi tasarımı, dikkat etmeseler bile okuyucuları etkiler. Yazı tipi tasarımından vazgeçmek, geliştirmenin kendisinden vazgeçmek demektir! Okuyucunun ruh hali buna bağlıdır. Yazı tipi, okumayı kolaylaştırır veya kullanıcıları sayfadan çıkmaya zorlar.

Tüm web tarayıcıları bir dizi varsayılan yazı tipi içerir. Bu, sayfanın CSS'sinde yazı tipi belirtilmemişse standart sürümün kullanılacağı anlamına gelir. Varsayılan yazı tiplerini kullanmaya devam edebilirsiniz, ancak bunlar kullanıcılar için işi zorlaştırır. Bu yüzden özel bir yazı tipi kullanmak çok önemlidir. WordPress temanız size yazı tipini değiştirme seçeneği sunmuyorsa, yardımcı olabilecek birçok web sitesi ve araç vardır.

Google Yazı Tipleri Alternatifleri

özel yazı tipleri ekle

çoğunuz biliyorsunuz Google yazı tipleri. Güzel yazı tiplerini bulabileceğiniz daha birçok web sitesi var. Bazıları kişisel kullanım için ücretsizdir. Ticari kullanıma ihtiyacınız varsa, bir lisansa ihtiyacınız olacaktır. Google Fonts ve Adobe Edge Fonts ücretsizdir. Bu yüzden çok benzersiz değiller.

İşte bazı yazı tiplerini bulmak için diğer kaynaklar ücretsiz ve ticari kullanım için:

  1. TemplateMonster — TemplateMonster web sitesinde web tasarımı için ihtiyacınız olan her şeyi bulacaksınız. Küçük bir fiyata kişisel kullanım için birçok yazı tipi ve yazı tipi paketi de vardır. Ayrıca, seçiminize yardımcı olmak için, broşürlerde veya çerçevelerde sunulan tüm yazı tipleri. Her yazı tipi ayrıca bir ticari lisans ile sunulur.
  2. MyFonts — MyFonts şu anda dünyadaki en geniş yazı tipi seçimini sunmaktadır. Ancak buradaki fiyatlar da üst segmentte. Bu nedenle, sıkı bir bütçeniz varsa, bu sizin için olmayabilir.
  3. Yazı TipiSpring — Fontspring, ticari kullanım için yeni yazı tipleri satmaktadır. Ancak hemen hemen her ailede 1-2 ücretsiz yazı tipi kişisel amaçlar için kullanılabilir. Ayrıca ücretsiz yazı tiplerinin olduğu ayrı bir bölüm var. Koleksiyon canlı. Ancak indirmeden önce belirli bir yazı tipi için lisans bilgilerini dikkatlice incelemeniz gerekir.
  4. Cufon yazı tipleri — Aynı zamanda farklı yazı tiplerinden oluşan devasa bir koleksiyon. Herhangi birini seçin ve bununla ilgili ayrıntılı bilgi içeren bir sayfa göreceksiniz. Çok sayıda ücretsiz yazı tipi vardır ve bunlar ayrı bölümlere ayrılmıştır. CufonFonts'taki sıralama sistemi oldukça esnek ve kullanışlıdır. Ayrıca, Webfont desteği dahildir.
  5. Dafont — 3 ücretsiz yazı tipinden oluşan başka bir erişilebilir koleksiyon. Çoğu yalnızca kişisel kullanım için tasarlanmıştır. Harika bir DaFont özelliği bir kategori sistemidir. Yazı tiplerini çizgi roman, video oyunları, vintage vb. tarzında seçebilirsiniz.

Yazı tipi seçimi çok cezbedici çünkü hepsi birbirinden güzel. Ama çok fazla seçmemelisiniz. Bir sitede ikiden fazla yazı tipi kullanmayın ağ. Sonraweb sitenizin görünümü tutarlı olacaktır. Yazı tiplerinizi seçtikten sonra, kullanacağınız her stil için (normal, kalın, italik vb.) dosyaları yüklediğinizden emin olun.

Artık web siteniz için uygun yazı tipini seçtiğinize göre, onu nasıl ekleyeceğinizi öğrenelim.

WordPress'e Özel Yazı Tipleri Nasıl Eklenir

Bir WordPress web sitesine yazı tipi eklemenin birkaç yolu vardır:

  1. eklentiler : bu durumda, farklı WordPress eklentileri sürecini kolaylaştırmak için kullanılır.
  2. el ile : bu yöntemi kullanarak, siteden indirilen bir yazı tipi indirmeniz ve CSS dosyasını değiştirmeniz gerekir.
  3. Temalar: Birçok popüler temanın yazı tiplerinizi özelleştirmek için yerleşik seçenekleri vardır (not - kullandığınız temaya bağlı olarak süreç değişeceğinden bu seçeneği ele almayacağız.

Seçenek 1 – Eklentilerle WordPress Yazı Tiplerini Değiştirin

Küresel değişiklikleri umursamıyorsak, yükleyebiliriz WordPress eklentileri bu, web sitenizdeki yazı tiplerini değiştirecektir.

Özel Yazı Tipi Eklentilerinin Özellikleri

Açık kaynak yazılımın topluluk çıkarları için bir avantajı vardır ve WordPress'in de bu avantajı vardır. Birkaç WordPress eklentisi, özel yazı tipleri eklemenize izin verir. Bu kadar çok eklenti varken uygun eklenti nasıl seçilir? Özel yazı tipi WordPress eklentilerinin özellikleri nelerdir?

İşte dikkate alınması gereken bazı noktalar:

  • Özel bir yazı tipi kullanma yeteneği
  • Birden çok yazı tipi kullanabilme
  • Başlıklar ve hedef bileşenler
  • Bonus: Görsel düzenleyiciden yazı tipi ayarlarını değiştirme yeteneği

Bu kadar. Listedeki ilk özellik çok önemlidir. Yine de DaFont, Font Squirrel vb. web sitelerinden yazı tiplerini indirebilirsiniz, ancak bunları WordPress'e yükleyebilmeniz gerekir.

Özel yazı tiplerini yüklemenize izin veren bazı WordPress eklentilerine bakalım.

1. Daha İyi Harika Yazı Tipi

Bu WordPress eklentisi, kullanıcılarının Better Font Awesome yazı tiplerini en son sürümleriyle otomatik olarak birleştirmelerini sağlar. CSS, kısa kodlar ve daha fazlası. Ayrıca, bu WordPress eklentisi otomatik olarak güncellenir.

Daha iyi yazı tipi harika - en iyi WordPress tipografi eklentileri

Orada özellikler olarak bulacaksınız: düzenli güncellemeler, kısa kod üreteci, diğer WordPress eklentileriyle uyumluluk, vb.

Indir | gösteri | Web hosting

2. WordPress için Google Yazı Tipleri

Bu WordPress eklentisi, WordPress web sitelerinizdeki tüm fontları kullanmanıza izin verecek 877 özel fontlardan oluşur. Gerçek zamanlı önizlemesi sayesinde, yazı tipi uygulandıktan sonra web sitenizin nasıl görüneceğini görmenizi sağlar. 

Google yazı tipleri - en iyi WordPress tipografi eklentileri

Ek olarak, zevk alacağınız kombinasyonu bulduğunuzda kaydedebilir ve ön uçta düzenleyebilirsiniz.

Özellikleri şunlardır: gerçek zamanlı bir önizleme, bir oldukça gelişmiş SEO, çok dilli destek, daha fazla 870 + Google Fonts desteği, kolay güncellemeler ve daha fazlası.

Indir | gösteri | Web hosting

3.Font Eklentisi

Fonts Plugin, kullanıcıların Google Fonts ve Adobe Fonts kitaplıklarına erişmesine izin veren ücretsiz bir WordPress eklentisidir. Bu WordPress eklentisi ile 1000'den fazla Google ve Adobe yazı tipi arasından seçim yapabilir, web sitenizde birden fazla yazı tipi kullanabilir ve eklentinin WordPress özelleştiricisindeki gerçek zamanlı önizleme özelliğiyle farklı seçenekleri test edebilirsiniz.

En iyi wordpress tipografi eklentileri

Yazı tipi boyutu, harf aralığı ve satır yüksekliği gibi web site tipografinizi özelleştirmenin daha fazla yolu için premium sürüme yükseltebilirsiniz, Yazı Tipi Eklentisi Pro.Indir | gösteri | Web hosting

4. Kolay Google Yazı Tipleri

Kolay Google Yazı Tipleri en iyi WordPress eklentileri web sitenizin tipografisini özelleştirmek için. Yazı Tipi Eklentisi gibi, yüzlerce Google Yazı Tipi arasından seçim yapmanıza ve bunları web sitenize eklemeden önce Özelleştirici'de önizlemenize olanak tanır.

Blogunuz için 10 WordPress tipografi eklentisi

Daha az sayıda Google Yazı Tipine erişim sağlamasına rağmen, WordPress özelleştiricisinde hemen görünecek olan yönetici alanında özel yazı tipi kontrolleri ve kuralları oluşturmanıza izin vermesi bakımından benzersizdir.

Indir | gösteri | Web hosting

2. Seçenek – WordPress Özel Yazı Tiplerini Manuel Olarak Kurun

@font-face yönergesini kullanarak web sitenize bir veya daha fazla yazı tipi bağlayabilirsiniz. Ancak bu yöntemin artıları ve eksileri vardır.

faydaları:

  • CSS sayesinde herhangi bir formattaki yazı tiplerini bağlayabilirsiniz: ttf, otf, woff, svg.
  • Yazı tipi dosyaları sunucunuzda bulunacaktır – üçüncü taraf hizmetlere bağımlı olmayacaksınız.

dezavantajları :

  • Her stil için doğru yazı tipi bağlantısı için ayrı bir kod kaydetmeniz gerekir.
  • CSS bilmeden kolayca kafanız karışabilir.

Ama yapabilirsen bu gerçek bir sorun değil sadece bitmiş bir kodu kopyala ve değerlerinizi belirtmeniz gereken yer.

Not : Başlamadan önce, bir çocuk teması oluştur web siteniz için. Bu şekilde, ana temanızı bırakarak alt temanızda tüm değişiklikleri yapabilirsiniz, böylece gelecekte gerekirse kolayca güncelleyebilirsiniz.

1. Adım: Bir "yazı tipleri" klasörü oluşturun

Alt temanızda, altında yeni bir "fontlar" klasörü oluşturun: wp-içerik/temalar/çocuk-temanız/yazı tipleri

Adım 2. İndirilen yazı tipi dosyalarını web sitenize yükleyin

Bu, barındırma kontrol paneliniz veya FTP aracılığıyla yapılabilir.

Tüm yazı tipi dosyalarını yeni eklenen yazı tipleri klasörüne ekleyin: wp-content/themes/ Alt temanızda, altında yeni bir “fontlar” klasörü oluşturun: wp-içerik/temalar/çocuk-temanız/yazı tipleri senin yarattığın.

Adım 3. Alt tema stil sayfası aracılığıyla yazı tiplerini içe aktarın

dosyasını açın style.css alt temanızın ve CSS dosyasının başına aşağıdaki kodu ekleyin (alt tema yorumundan sonra):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

nerede MyWebFont yazı tipinin adı ve src özelliğinin değeri (tırnak içindeki parantez içindeki veriler) konumlarıdır (göreceli bağlantılar). Her stili ayrı ayrı belirtmemiz gerekiyor.

İlk önce normal stili bağladığımız için font-weight ve font-style özelliklerini normal olarak ayarlıyoruz.

Adım 4. Eklerken italik, Aşağıdakini yaz:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Her şey aynı olduğunda, yazı tipi stili özelliğini italik olarak ekleyen sadece biziz.

Adım 5. Kalın yazı tipini eklemek için aşağıdaki kodu ekleyin:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Font-weight özelliğini kalın olarak ayarladığımız yer.

Her stil için yazı tipi dosyalarının doğru konumunu belirtmeyi unutmayın.

Adım 6. Kalın italik yazıları birleştirmek için aşağıdakini yazın:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

İşte bu kadar. Artık web sitenize dört yazı tipi stili bağladığınıza göre.

Ancak bir not var: Bu yazı tipi bağlantısı Internet Explorer 8'de düzgün görüntülenmeyecek. Teselli, hala IE8 kullanan çok az insan var.

Diğer önerilen kaynaklar

Ayrıca, web sitenizi ve blogunuzu daha iyi ele geçirmek ve kontrol altına almak için sizi aşağıdaki kaynaklara başvurmaya davet ediyoruz.

Sonuç

Kullanıcıların web sitenizi ziyaret ettiklerinde ilk fark ettikleri şey nedir? Bu doğru, tasarımı! Tasarımın çoğu, güzel yazı tiplerinin doğru kullanımına dayanır. Bu nedenle, web sitenizin yazı tipi tasarımına dikkat etmeniz gerekir. Yeni bir yazı tipi stili yerleştirmek için kod ekleyin veya yukarıda belirtilen eklentilerden birini kullanın. Nasıl seçeceğiniz size kalmış.

Aynı web sitesinde ikiden fazla yazı tipi kullanmadığınızdan emin olun. Web sitesine ne kadar çok özel yazı tipi eklerseniz, web sitesi hızı o kadar düşecektir.

Bir WordPress web sitesine nasıl özel yazı tiplerinin ekleneceğini gösteren bu makale bu kadar. Sizi denemeye davet ediyoruz. Herhangi bir endişeniz veya öneriniz varsa, lütfen bize bildirin. Yorumlar.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Bu arada, bu yazıyı farklı sosyal ağlarda paylaş.   

...