WordPress’e özel yazı tipleri nasıl eklenir
Web sitenizin gerçekten öne çıkmasını istiyorsanız, özel bir yazı tipi kullanmak bunu başarmanıza yardımcı olacaktır. Aralarından seçim yapabileceğiniz binlerce özel yazı tipi vardır ve projeniz için doğru olanı seçerek, sadece benzersiz değil, aynı zamanda tarzınızı ve markanızı da yansıtan bir web sitesi oluşturabilirsiniz. Peki WordPress’e nasıl özel bir yazı tipi eklersiniz? Bu makalede, web sitenize özel yazı tipleri uygulama hakkında bilmeniz gereken her şeyi tartışacağız. Bunlar şunları içerir:
Özel bir yazı tipi bulundu
Kolay Google Fonts eklentisini kullanarak web sitenize google yazı tipi nasıl eklenir
Google yazı tipini web sitenize manuel olarak ekleyin (eklentilere gerek yok)
WordPress’e Adobe Yazı Tipi Ekleme
Web odanıza özel yazı tipleri nasıl eklenir
Başlamaya hazır?
Özel bir yazı tipi nerede bulabilirsiniz?
Google Fonts – En popüler seçim olan Google Fonts, 135’ten fazla dilde kullanılabilecek 900’den fazla açık kaynak tasarımcı yazı tipinden oluşan ücretsiz bir dizin sunuyor. Bu yazı tipleri hızlı bir şekilde keşfedilebilir ve daha sonra herhangi bir web tasarım projesine sorunsuz bir şekilde entegre edilebilir. Adobe yazı tipleri (daha önce TypeKit olarak bilinir)-TypeKit hizmetlerinin ücretsiz ve premium bir sürümünü sunsa da, şimdi adını adobe yazı tiplerine değiştirmelisiniz, kaydolmalısınız. Bu kaynağa erişmek için ücretli Adobe Creative Cloud paketi. Aralarından seçim yapabileceğiniz binlerce yazı tipi vardır, tüm yazı tipleri kişisel ve ticari kullanım için lisanslıdır ve tasarımları sevmeyenler için mükemmel olan proje temalı yazı tipi paketleri arasından seçim yapabilirsiniz.
Font Squirrel – Sincap Yazı Tipi Kütüphanesinde ücretsiz ve premium yazı tipi karışımını bulacaksınız, sonuncusu bir kez satın alınabilir. Bir kez daha, en ücretsiz ve ticari lisanslı binlerce yüksek kaliteli yazı tipi arasından seçim yapabilirsiniz.
Fonts.com – 150.000’den fazla masaüstü ve web yazı tipi ürünü sağlayan Fonts.com, premium özel yazı tiplerinin etkileyici koleksiyonları içerir. Ayrıca Font.com blogunda çeşitli ilginç makaleler bulacaksınız, ipuçlarını ve tipografik teknikleri paylaşacaksınız.
FONTPAIR – Diğer kaynaklardan biraz farklı bir deneyim sunan Fontpair Çifti Google yazı tipinden birlikte yazı tipleri, web siteniz için doğru yazı tipleri kombinasyonunu bulmanıza yardımcı olur.
Yani, şimdi özel bir yazı tipi nerede bulacağınızı biliyorsunuz. Ardından, WordPress sitenize Google yazı tipini nasıl ekleyeceğinizi görelim.
Kolay Google Font eklentilerini kullanarak WordPress’e Google Yazı Tipi Nasıl Eklenir
Google yazı tipi özel yazı tipleri için en popüler kaynak olduğundan, bu kitaplıktan web sitenize nasıl yazı tipleri ekleyeceğine bakarak başlayacağız. Bunu yapmanın birkaç yolu vardır, ancak en hızlı ve en kolay seçenek WordPress Easy Google Fonts eklentisini kullanmaktır. Easy Google Fonts, bir kod satırına dokunmak zorunda kalmadan WordPress sitenize özel bir yazı tipi girmenizi sağlayan ücretsiz bir WordPress eklentisidir. WordPress ayarlamalarıyla entegre olan bu eklenti, sayfayı yenilemek zorunda kalmadan web siteniz ön ucuna gerçek zamanlı olarak Google yazı tiplerini girip kullanmanıza olanak tanır. Şimdi bu eklentiyi nasıl yükleyeceğinizi ve kullanacağınızı öğrenelim. Adım 1: Google Yazı Tipi’ni kolay Google Yazı Tipleri ile Başlatın, WordPress Gösterge Tablonuzu Açın ve Menüden Yeni Eklentiler> Eklentileri Seçin. Ardından Easy Google yazı tiplerini arama işlevine yazın ve eklenti alındıktan sonra yükleme> Etkinleştir’i tıklayın. Şimdi WordPress menünüzdeki ayarların altında kolay bir Google yazı tipi bulacaksınız. Adım 2: WordPress Ayarında Yazı Tipi Düzenle, Görünümden Seçtiğiniz WordPress menüsünden kolay Google Yazı Tiplerini yükledikten sonra> Özelleştir. Web siteniz artık ayarlamalara tipografik parçanın eklendiğini bulacağınız ön uçta açılacak.
Tipografiye tıklayın. Daha sonra web sitenizden Google Font Custom (örneğin paragraflar, başlık 2, başlık 3 vb.) Uygulamak istediğiniz farklı bir alan seçebilirsiniz. Düzenlemek istediğiniz bölümün altında yazı tiplerini düzenleyin. Daha sonra kullanmak istediğiniz yazı tipini seçebilirsiniz – her yazı tipinin doğrudan web sitenize nasıl göründüğünü önizlemeyi görebilirsiniz. Sadece yazı tipi türünü değiştirmekle kalmaz, aynı zamanda rengi, boyutunu, konumunu ve daha fazlasını da değiştirebilirsiniz. Yeni yazı tipinizden memnun kaldığınızda Publish’i tıklayın. Adım 3: Paragraf yazı tiplerini ve başlıklarını 1-6 değiştirmenize izin verecek kolay bir varsayılan Google yazı tipleri kontrol yazı kontrolü kontrolü oluşturun. Ancak, temanızın tüm öğeleri varsayılan yazı tipi kontrolü ile yönetilemez. Temasınızdan farklı öğeleri değiştirmek istiyorsanız (paragraflar veya başlıklar dışında), o zaman kendi özel yazı tipi kontrolünüzü yapmanız gerekir. Kolay yazı tipi kontrolü bunu kolayca yapmanıza izin verse de, yine de CSS seçmenleri hakkında temel bir anlayışa ihtiyacınız var. Özel yazı tipi kontrolü eklemek için WordPress kontrol panelinizden Ayarlar> Google Yazı Tipi’ni seçin. Ardından, Yazı Tipi Denetleme Düzenleme sekmesinde, yeni yazı tipi kontrol grubunuz için uygun bir ad verin, ardından yazı tipi denetimi için seçin. Burada blok diplomalar için yazı tipi kontrolü yapacağız … CSS Seçicileri Ekle altında, yönetmek istediğiniz öğelere CSS seçmenleri ekleyin. İsterseniz birden fazla öğe ekleyebilirsiniz. Ardından yazı tipi kontrolünü kaydet’i seçin. Web sitenizin önündeki özelleştiriciye geri dönelim, tipografi altında, şimdi yeni özel kontrolünüze erişebileceğiniz tema tipografi seçeneklerini bulacaksınız.
Artık belirli özel öğeler için yeni bir özel yazı tipi seçebilir ve görünümün ve diğer konumların görünümünü değiştirebilirsiniz. Easy Custom Font, Google’dan WordPress’e özel bir yazı tipi eklemek isteyen herkes için iyi bir seçenektir. Ancak, isterseniz, eklentiler olmadan kodu kullanarak web sitenize Google yazı tipi manuel olarak da ekleyebilirsiniz. Bunu nasıl yapacağınızı öğrenelim … Google yazı tiplerine manuel olarak (eklenti gerekmez) Google yazı tiplerine nasıl eklenir (eklenti gerekmez), WordPress’e manuel olarak eklemeyi tercih ederseniz, kodlama hakkında temel bilgilere ihtiyacınız olacak. Adım 1: Başlatmak için Google Yazı Tipi’ni seçin, Google yazı tipini açın ve web sitenize eklemek istediğiniz özel yazı tipi türünü seçin. Ardından yazı tipi sayfasında bu yazı tipini seçin. Burada indie çiçek yazı tiplerini seçtik. Şimdi ekranınızda bir açılır pencere görünecek. Seçtiğiniz yazı tipine bağlı olarak, bilgiyi görmenin yanı sıra ağırlık ve yazı tipi stili için ayar seçeneğine erişebileceksiniz. Adım 2: Özel yazı tipi kodunu bir sonraki WordPress sitenizdeki sabitleyin, gömme kodu kopyalamanız (yukarıdaki açılır pencereye bakın) ve WordPress temanızın bölümüne eklemeniz gerekir. Bunu yapmanın en kolay yolu, ücretsiz WordPress eklentisi ekleme başlıklarını ve altbilgilerini yüklemektir. Bu eklentiyi kullanarak tema dosyalarınızı düzenlemeden web sitenize hızlı bir şekilde kod ekleyebilirsiniz. Kurulumdan sonra, WordPress kontrol panelinizden Ayarlar> Başlık ve Altbilgi Ekle’yi seçerek eklenti ayarlarını açın. Ardından, Google Fonts Gömme Kodunuzu başlığa eklemeniz gerekir.
Aynı şekilde, tercih ederseniz, Header.php dosyalarını çocuğunuzun temasından düzenleyebilirsiniz. Adım 3: Yeni yazı tipini CSS kullanarak uygulayın Özel yazı tipiniz için HTML kodunu web sitenize ekledikten sonra, artık yeni özel yazı tipinizi uygulamak için CSS kullanabilirsiniz. Google Fonts açılır penceresinde, özellikle yeni yazı tipiniz için CSS kurallarını bulacaksınız. Web sitenizin doğrudan tarafındaki özelleştiriciye geri dönün, ek CSS seçin. Burada sitenizdeki yazı tiplerini ayarlamak için CSS kodunu girebilirsiniz. Aşağıda, başlık 2 ve paragraflara indie çiçek CSS kodunu uyguladığımızı görebilirsiniz …
Ayarlama size gerçek zamanlı yazı tiplerinde değişiklikler gösterilir ve sonuçlardan memnunsanız, Publish’i tıklayın. WordPress’e Adobe Yazı Tipleri Nasıl Eklenir Eğer Adobe Creative Cloud Premium paketine kaydolduysanız, WordPress web sitenize herhangi bir özel yazı tipi ekleyebilirsiniz. Bu işlem, sitenize manuel olarak Google yazı tipi eklemeye çok benzer. Kısaca bakalım. Adım 1: Adobe yazı tipini ilk seçin, kapsamlı Adobe yazı tipi kitaplığını keşfetmeniz ve projenize uygun yazı tiplerini seçmeniz gerekir. Bir seçenek sunduktan sonra, yeni bir web projesine yazı tipleri eklemek için simgesini tıklayın.
Şimdi web projenizi adlandırmanız ve dahil etmek istediğiniz ağırlık ve yazı tipi stilini seçmek için bir onay kutusu kullanmanız istenecektir.Ardından projeyi seçin.Adım 2: Adobe yazı tipi kodunu WordPress sitenize sabitleyin Bir sonraki adım, adobe tarafından sağlanan kodu seçtiğiniz yazı tipi için WordPress web sitenize gömmektir.Bu, Google yazı tipi kodunu sabitlemekle aynı işlemi izler.Kodu web sitenizdeki etiketine sabitleyin veya WordPress eklentisi ekleme başlıklarını ve altbilgilerini kullanın (daha önce tartışıldığı gibi).Adım 3: Yeni yazı tipini CSS kullanarak bir kez daha uygulayın, Google yazı tipleri gibi, artık CSS kurallarını kullandığınız yeni Adobe özel yazı tipini uygulayabilirsiniz.Adobe kontrol panelinizde, web proje sayfanız, seçtiğiniz her yazı tipi türü için CSS yazı tipinin yazı tipi adını ve yazı tipi stilini ve sayısal ağırlığı içerecektir. WordPress sitenize geri dönersek, bu CSS kuralları ek CSS altındaki özelleştiricide kullanılabilir. Şimdi, çok popüler ve etkileyici birinci sınıf kaynaklar, Adobe yazı tipleri olan ücretsiz bir Google yazı tipi kullanarak WordPress’e özel yazı tiplerinin nasıl ekleneceğini tartıştık. Ancak, tartışacağımız son seçenek, web sitenize sitenizin sunucusuna yükleyerek özel yazı tipleri eklemenize olanak tanır. Daha fazlasını öğrenelim. Web odanıza özel bir yazı tipi nasıl eklenir Web odanıza nispeten kolay özel bir yazı tipi ekleyin, ancak yine de web sitenize yazı tipleri uygulamak için CSS’nin temel bir anlayışına ihtiyacınız var. Adım 1: Bu makalenin başında belirtildiği gibi özel yazı tipini indirin, web sitenizde kullanmak için ücretsiz veya premium özel yazı tiplerini seçebileceğiniz birçok kaynak vardır. Sunucunuza eklemek için özel bir yazı tipi seçerken, kullanma hakkına sahip olduğunuzdan emin olun ve yazı tipi indirilebilir. Burada sincap yazı tiplerinden ücretsiz özel yazı tipi milkshake indirdik. Özel yazı tipinizi web yazı tipi biçiminde indirmeniz önemlidir. WOFF Web Font kapsayıcısının formatı en çok tarayıcı desteğinin tadını çıkarır, ancak Google, tüm cihazlardaki kullanıcılar için tutarlı deneyim sağlamak için birkaç biçim verilmesini önerir. Özel yazı tipinizi farklı bir formata dönüştürmeniz gerekiyorsa, sincap yazı tipi bunu yapmanıza izin veren ücretsiz bir webfont jeneratör aracı sağlar. Adım 2: Sunucunuza özel bir yazı tipi yükleyin Bir sonraki adım, özel yazı tipinizi sunucunuza yüklemektir. Bunu yapmak için Site CPanel’inizdeki Dosya Yöneticisini açın. Ardından etkin tema klasörünüzde, yazı tipi adlı yeni bir klasör oluşturun ve özel yazı tiplerinizi buraya yükleyin. Birkaç yazı tipi formatınız varsa, her şeyi yazı tipi klasörüne yükleyin. Özel yazı tipiniz şimdi web odanıza eklendi. Adım 3: Web sitenize özel bir yazı tipi uygulamak için CSS kullanın, artık web sitenize özel bir yazı tipi uygulamanız gerekir. Başlamak için, temalı sayfanızda yazı tipleri yüklemeniz gerekir. Bunu yapmak için WordPress ayarını açın ve ek CSS altında şu kodu ekleyin: @font sarılı { Yazı tipi ailesi: Milkshake; SRC: URL (“https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff”) format (“woff”); } Önemli olan, yazı tipi ve URL’nin adını değiştirdiğinizden emin olun (sunucunuzdaki yazı tipi dosyası için URL’yi kopyalayın). Ardından, sitenizdeki yazı tiplerini güncellemek için CSS kurallarını kullanabilirsiniz. Başlık 3 ve paragraf bölümüne özel bir yazı tipinin nasıl uygulanacağına bir örnek: