WordPress sitenize özel yazı tipi eklemenin kolay yolları
Renkler, görüntüler ve diğer yapısal öğeler gibi, tipografi de bir web tasarımının önemli bir parçasıdır. Bu, markaları ve kişiliği, baharat içeriğini ve genel olarak iletişim kurar ve WordPress web sitesinin estetiğini büyük ölçüde artırabilir (kullanmamayı kesinlikle tavsiye ettiğim çizgi roman sans hariç). Neyse ki, son yıllarda ücretsiz yazı tipleri ve zincirlerin kullanılabilir hale gelmesi daha kolay hale geldi. Tasarımcılar ve web sitesi sahipleri artık çevrimiçi mevcudiyetlerine güzel mektup türleri dahil etmek için çok sayıda kaynak kullanabilirler. Bu makalede, iki Google yazı tipi ve Adobe Edge Web Fonts hizmetleri aracılığıyla WordPress sitenizde özel yazı tipleri almanın iki yolunu göreceğiz. Her ikisi de sitenize entegre edilebilecek büyük web yazı tipi kitaplıklarıdır.
Ancak, bunu nasıl yapacağımıza dalmadan önce, tipografinin web siteniz için neden önemli olduğunu hızlı bir şekilde tartışalım. Web tasarımında tipografiyi doğru kullanarak neden özel yazı tiplerini kullanmanız gereken ayrı bir sanattır. Sadece doğru yazı tipini seçme problemi değil, aynı zamanda kalınlık, eğim ve boyut da büyük bir rol oynar. Öte yandan, doğru bir şekilde yapılırsa, tipografi sitenizin görünümünü ve hissini büyük ölçüde değiştirebilir ve gerçekte kim olduğunuzu gösterebilir. Muhafazakar girişimci? Sevimli hipster? Web sitenizdeki yazı tipi, ziyaretçilerin bu tür aramalar yapması için önemli bir faktördür.
Aslında, bu makalede, Social Tetikleyicilerden Derek Halpern, restoran misafirlerinin menüde kullanılan yazı tiplerine dayanan şef becerileri seviyesi hakkında varsayımlar yaptığını gösteren deneylerden bahsediyor. İlginç değil mi? Ayrıca, bir kullanıcı deneyimi sorunu var. Hepimiz içeriğin bir kral olduğunu bilsek de, içeriği sunma şekliniz de önemlidir. Dünyada en dikkatli düşünülen makaleyi yazabilirsiniz, ancak okunamayan bir kaos ise, kimse dikkat etmeyecektir. Aslında, aynı makale diğer deneylerden alıntı yapıldı. Burada katılımcılardan verilen bir dizi talimatı ne kadar sürdürmeleri gerektiğini değerlendirmeleri istenir. Şaşırtıcı bir şekilde, talimatlar daha karmaşık bir yazı tipine yazdırıldığında, tahmin edilen tahmin edilir, onu neredeyse iki katına çıkarmanın ne kadar sürdüğü tahmin edilir. Bu bulguya dayanarak, yazı tipi insanların web sitenize bakma biçiminde rol oynayabilir mi? Hareket, onu ortadan kaldırmak için cinsel şiddeti ortaya çıkarır. Aslında, doğru yazı tipini seçmek web sitesinin başarısı için çok önemlidir! Ceza, dönüşüm ve diğer önemli faktörlerin oranı üzerinde doğrudan bir etkisi vardır. Ayrıca, bu tipografiye odaklanan WordPress temalarının bir listesini görecek misiniz? Sadece güzel değiller mi? Biliyorum, sana kesinlikle katılıyorum. Google yazı tipinden yazı tipi yükleme
Pekala, şimdi bu makalenin özünü tartışalım: Sitenizde gerçekten özel bir yazı tipi nasıl alınır. Daha önce de belirtildiği gibi, bunu başarmanıza yardımcı olabilecek iki hizmet göreceğiz.
Sans-serif (tork için kullanıldığı gibi ek hatları olmayan basit yazı tipleri)
Ekran (Başlık gibi daha büyük boyutlarda kullanım için)
El Yazısı (el yazısını taklit eden yazı tipleri)
Monospace (tüm karakterler aynı alana sahiptir)
Stil
Kalınlık (çok ince ila çok kalın)
Eğik (düz ila eğimli)
Genişlik (karakterler arasında genişliğe kadar dar boşluk)
Script (Latin alfabesi dışında)
Sirilik
Sirilic genişletildi
Devanagari
Yunan insanlar
Yunanca genişletildi
Khmer
Latince
Latin genişletildi
Vietnam
Benim durumumda, sadece ad arama seçeneğini kullanıyorum, çünkü gerçekten sevdiğim bir yazı tipi olan “Advent Pro” nu yüklemek istiyorum. 2. Bir sonraki yazı tipinizi seçin, sağ alttaki mavi düğmeyi tıklayarak söz konusu yazı tipini koleksiyonunuza ekleyin. Bu, seçilen tüm yazı tiplerinin depolandığı ekranın altındaki çubuğu açacaktır. Not: Birden fazla yazı tipi ekleyebilirsiniz.
Seçiminizden memnun kaldığınızda, yazı tipi koleksiyonunuzun sağ üst köşesindeki “Kullan” ı tıklayın. 3. Yazı tipi stilini seçin Şimdi farklı bir yazı tipi stili seçeceğiz. Çoğu yazı tipi çeşitli kalınlık seviyelerinde gelir. Özel bir yazı tipi yüklemek ek bir yükleme süresi ürettiğinden (sağdaki kadran göstergesine dikkat edin), yalnızca gerçekten ihtiyacınız olanı ekleyebilirsiniz. Örneğimde “normal”, “ışık” ve “ekstra ışık” ı seçtim. Ek karakterlerden oluşan bir koleksiyon seçin (isteğe bağlı) Sitenizi farklı bir alfabeye sahip bir dilde görüntülemeyi planlıyorsanız ve seçtiğiniz yazı tipi bunu destekliyorsa, bir sonraki bölümde ihtiyacınız olan alt kümeyi seçebilirsiniz. Bu şeyleri yapmamayı planladığım için izin verdim.
5. Kodu kopyalayın ve WordPress sitenize ekleyin Yukarıdaki seçtiğinizden, Google yazı tipi, yazı tiplerini sayfanıza yüklemek için gereken kodu üretecektir. Bunu yapmak için üç seçeneğiniz var: HTML, CSS veya JavaScript. HTML veya JavaScript kullanıyorsanız, sağlanan kod başlığınıza gider.php belgesine gider, etiketinden hemen sonra olmalıdır. CSS’yi seçerseniz, Style.css dosyanızın başlangıcında aramaların eklenmesi gerekir. 6. CSS’nizdeki yazı tipleri artık yazı tipleri sitenize tamamen entegre edilmiştir. Yapılacak olan şey aslında onu bir yerde demek. Özel yazı tipinizi görüntülemek için, örneğin şunları olan CSS üzerinden sitenizdeki öğelere ayarlamanız gerekir: H1 { Yazı tipi ailesi: ‘Advent Pro’, sans-serif;
Font-Heavy: 400;
} Şimdi bittin. Şimdi o kadar zor değil, değil mi? Ancak, aynı görevi elde etmek için eklenti yoksa WordPress bir WordPress olmayacaktır. Google yazı tipleri, Google yazı tipini sitenize herhangi bir kodlamadan yüklemenize olanak tanıyan eklentilerdir. Bu, sitenizdeki yazı tipi değişikliklerinin önizlemesini gerçek zamanlı olarak görmenizi sağlamak için WordPress Customerer ile entegre edilmiştir. Yani, herhangi bir dosyaya dokunmadan sitenize özel yazı tipleri eklemenin yollarını arıyorsanız, bu iyi bir seçenektir.
Adobe Edge’den WordPress’e özel bir yazı tipi yükleme
Listedeki ikinci rakibimiz Adobe Edge webfonts. Bu bir hizmet – tahmin edebilirsiniz – Adobe, bir Photoshop üreticisi (ve her zaman güncellenmek isteyen bir kötü oyuncu). Google yazı tipleri gibi, Edge Web yazı tipleri 500’den fazla ücretsiz tipografiye sahip dizindir. Bu hizmetin kullanımı Google’ın çözümünden tartışmasız daha kolaydır. Ana sayfada “Başlat” ı tıklayın veya başlamak için bu adresi ziyaret edin. 1. Yazı tipinizi bulun
Hayalinizdeki yazı tipini almak için, doğrudan bir dizi sınıflandırma ve mülke dayalı olarak mevcut olan adlara veya filtre yazı tiplerine göre arama yapabilirsiniz. Adobe rakiplerinden daha fazla seçenek sunar.
Başlıklar veya paragraflar için önerilir (çok iyi fikirler!) Yazı tipi ağırlığı, yükseklik, genişlik, büyük/küçük harfler, kontrast, eski kuvvet numaraları/kaplama (son nokta kuvvet kuvvetini ifade eder) Kiril, Katalan, Alman veya İsveç gibi yabancı diller ve alfabe alfabeleri için dil desteği
“Advent Pro” seçimi de burada mevcuttur, bu yüzden bir isim aramasıyla bulmakta sorun yaşamıyorum. 2. Seçiminize ekleyin İmleci istediğiniz yazı tipine yönlendirdiğinizde, mevcut tüm stilleri ve lisansları görüntüleyen yeni bir pencere görünecektir. Yazı tipinin istediğiniz kullanım için kullanılabilir olup olmadığını görmek için lisans bağlantısını tıklayın. Sitenizde yapmaya devam etmek için üstte ‘Bu yazı tipini seç’ tıklayın. Yazı tipi menüsünü yapılandırın, yazı tiplerinizi daha fazla yapılandırabileceğiniz yerde açılır. İlk olarak, standart bir alt küme veya mevcut tüm karakterleri kullanmak isteyip istemediğinizi seçin. Standartlar tüm Latin-1 karakterleri ve bazı yararlı tipografik işaretleri içerir. İkinci seçenek, bu yazı tipinde bulunan tüm karakterlerden oluşur. Yine, bu bir yükleme meselesidir.
Ardından istediğiniz stili seçin. Sadece gerçekten ihtiyacınız olanı ekleyin. Sitenizde yalnızca Semibold ve normal kullanacaksanız, gerisini yüklemenize gerek yoktur.
4. Yapılandırmayı bitirdikten sonra kodu sitenize ekleyin, alttaki kodu kopyalayın. Google yazı tiplerinden farklı olarak, Adobe Edge web yazı tipleri yalnızca JS komut dosyaları sağlar. Daha önce de belirttiğim gibi, bunun web sitenizin bölümüne dahil edilmesi gerekiyor, ilk etiketten hemen sonra olmalıdır.
Not: Birden fazla yazı tipi seçtiğinizde, her şey aynı kod satırına dahil edilecektir, böylece sitenize bir kerede ekleyebilirsiniz. Aynı işlemden birkaç kez geçmenize ve birkaç satır kod eklemenize gerek yok. 5. Fontları Style.css adresinden çağırın, şimdi geri kalan, stil sayfanızda bir yerlerde yazı tiplerini aramaktır. Daha kolay hale getirmek için, Adobe Edge Web yazı tipleri, desteklemeyen bir tarayıcı için yedek yazı tipi de dahil olmak üzere ekranın altındaki CSS örneği verecektir. Bunu sitenizde, örneğin başlığınızda yazı tiplerinin görünmesini sağlamak için kullanın: H1,
H2, H3 { Yazı tipi ailesi: Advent-Pro, sans-serif; } Peasy kolay, değil mi? WordPress için Özel Yazı Tipleri Kısaca WordPress web sitesine özel yazı tipleri ekleyin Büyük bir fark yaratabilirsiniz. Mükemmel bir tasarım aracıdır, kişiliği taşır ve markanızı daha da geliştirmenize olanak tanır. Ayrıca, içeriğinizin okunabilirliğini de belirler ve kullanıcı deneyimini doğrudan etkilerler. Bir web yazı tipi kullanmak, sitenize özel tipografi girmenin kolay bir yoludur. Bunu yapmak için iki iyi alternatif, Google ve Adobe tarafından sunulan hizmetlerdir. Her iki kütüphane de iyi doldurulur ve herkes için kullanılır. Yalnızca birkaç tıklama, yüzlerce farklı yazı tipi arasında seçim yapabilir ve içeriğinizin parlaması için web sitenize kolayca koyabilirsiniz. WordPress için özel bir yazı tipi kullanıyor musunuz? En sevdiğin yöntem hangisi? Bize yorumlarda söyleyin!
