WordPress’e Google yazı tipini nasıl eklerim?4 Kolay Yöntemler!
Web sitenizin tipografisini ayarlamak ister misiniz? Doğru yere geldin. Bu kılavuzda, WordPress sitenize adım adım Google yazı tipi eklemek için çeşitli yöntemler göstereceğiz. Varsayılan olarak, WordPress teması belirli yazı tipleriyle birlikte gelir ve içerik yayınladığınızda, bu yazı tipi ön uçta oluşturulur. Ancak, bazen markanızı mükemmel bir görünüm ve his sağlamak için sitenizde özel bir yazı tipi kullanmak isteyebilirsiniz. Bu yüzden bugün, sitenizde Google yazı tipini nasıl gireceğinizi göstereceğiz!
WordPress’e neden Google yazı tipini ekliyorsunuz? Kullandığınız yazı tipinin siteniz üzerinde büyük bir etkisi vardır. Bir yandan, bu web sitenizin tasarımını ve görünüşünü etkiler. Yazı tipi, ziyaretçilerin sitenize ne zaman geldiklerini gördükleri ilk şeylerden biridir, böylece iş stilinize uymaları gerekir. Öte yandan, kullanıcının deneyimi üzerinde de bir etkisi olabilir. Örneğin, yazı tipinin okunması zorsa, ziyaretçileriniz istediklerini bulmakta zorluk çekecek ve sitenizden ayrılacaktır. Bu nedenle, doğru yazı tipine sahip olmak sadece sitenizi daha iyi göstermekle kalmaz, aynı zamanda kullanıcı deneyimini de geliştirir.
Bu nedenle, işletmenizin özünü ileten kullanıcı dostu yazı tipleri kullanmanızı şiddetle tavsiye ediyoruz. Adobe’nin TypeKit ve Friconix gibi birkaç yazı tipi hizmeti var. Ancak, en iyisi Google yazı tipi, web sitenizle entegre olmaya hazır binlerce yazı tipi ailesi ile ücretsiz hizmettir. Ve en iyi yanı, WordPress’e Google yazı tipini eklemek oldukça kolaydır ve sadece 5 dakika sürer. Bunu yapmanın birkaç yolu var. WordPress Sitenize Google Yazı Tipi Ekleme Yöntemi, WordPress’te Google Yazı Tipini Girmek İçin Çeşitli Yöntemler Var: Eklentileri Kullanma
Dosya Function.php düzenle
Style.css aracılığıyla
Header.php dosyalarını düzenleme
Tüm bu seçenekler çalışmayı tamamlar, bu nedenle becerileriniz ve ihtiyaçlarınız için en uygun olanı seçin. Bu yöntemlerin her birine daha yakından bakmadan önce, temanızın Google yazı tipi entegrasyonu ile donatılmış olup olmadığını kontrol etmelisiniz. Google Font Entegrasyonunu Kontrol Edin WordPress temalarının çoğu özel bir tema paneli ile birlikte gelir. Oradan, kullanıcılar herhangi bir kod yazmadan tüm temaları ayarlayabilir. GeneratePress gibi bazı temalar entegre Google yazı tipi desteği ile birlikte gelir. Bu, yazı tiplerini entegre etmek için bir eklenti veya özel kod kullanmanız gerekmediği anlamına gelir. Bu zamanınızı koruyabilir ve her şeyi sizin için kolaylaştırabilir.
Google yazı tipiyle entegrasyonla birlikte bulunan temayı kullanıyorsanız, Site Tipografisinizde Tema Panelinden veya WordPress Ayarlamasından değişiklik yapabilirsiniz. Bu nedenle, sitenizde Google yazı tiplerini girme işlemine başlamadan önce, temanızın Google yazı tipleriyle donatılıp donatılmadığını kontrol etmenizi öneririz. Şimdi, WordPress sitenize Google yazı tipini eklemek için her yönteme bakalım. 1) Bir eklenti kullanarak Google yazı tipini WordPress’e eklemenin en kolay yollarından biri bir eklenti kullanmaktır. En iyilerinden biri Google yazı tipinin tipografisi. Bu, tek bir kod satırı yazmadan sitenizde Google yazı tipini girmenize yardımcı olacak ücretsiz bir araçtır. İlk olarak, eklentiyi web sitenizdeki yükleyip etkinleştirin.
Bundan sonra, eklentiyi açın ve eklenti ayarlarını kontrol edin.
Tıkladığınızda, WordPress ayarına yönlendirilirsiniz.
Yazı tipi yükleme
Ayıklamak
Temel ve gelişmiş ayarlarla neler sunulduğunu görelim. Temel Tipografi bölümünün temel ayarları, içerik, başlık ve giriş düzlemi için varsayılan yazı tipi türünü seçebilirsiniz.
Aile yazı tipinin her bir bölümünün altındaki açılır listeden yüzlerce Google yazı tipinden birini seçebileceksiniz. İstediğiniz yazı tipini biliyorsanız, arama özelliğini kullanarak yazmanız yeterlidir.
Bu öğretici için yazı tipi çalışması sans kullanacağız. Açılır menüden bir yazı tipi seçtikten sonra değişiklikler hemen görülecek ve önizlemeyi doğrudan yeni yazı tipiyle göreceksiniz. Ayrıca, ağırlık ve özel yazı tipi kuvvetini belirleyebileceksiniz. Bitirdikten sonra değişiklikleri yayınlayın. Gelişmiş Ayarlar Gelişmiş ayarlar altında, marka görüntüleme, gezinme, içerik, yan bıçaklar ve altbilgi için yazı tipi türünü seçebilirsiniz. Web sitenizin çeşitli bölümlerinde farklı yazı tiplerini kullanmayı planlıyorsanız bu harika bir özelliktir. Dropdown’dan yazı tiplerini seçtikten sonra değişiklikleri yayınlayın. Google yazı tipinin ücretsiz sürümü sınırlı özelliklerle birlikte gelir, ancak bir site için 29 USD’den başlayarak premium sürümler de vardır. Bu Pro sürüm, yazı tipi boyutu, renk, optimizasyon ve özel öğeler gibi şeyleri yapılandırmanıza yardımcı olacaktır. Tüm tipografik seçeneklerinizi kontrol etmek istiyorsanız bu iyi bir seçimdir. Öte yandan, bunun için para harcamak istemiyorsanız, bu değişikliği küçük bir CSS kullanarak yapabilirsiniz. 2) Dosya işlevini düzenle.php WordPress sitenize Google yazı tipini eklemek için başka bir seçenek Dosya Function.php’i düzenlemektir. Bu yönteme devam etmeden önce, çocuk temasını kullandığınızdan emin olun. Bunu nasıl yapacağınızı bilmiyorsanız, bir çocuk teması oluşturmayı veya bir alt tema eklentisini nasıl kullanacağınızı okuyabilirsiniz. Bu yöntem için, Function.php dosyasını doğrudan düzenleyebilir veya bir eklenti kullanabilirsiniz. Yeni başlayansanız, sitenize özel bir kod eklemek için bir kod görüntü eklentisi kullanmalısınız. Bu kılavuzda kod görüntülerini kullanacağız. Not: Bir kod görüntüsü kullanırsanız, bir çocuk teması oluşturmanız gerekmediğine dikkat edilmelidir. Ancak, her zaman sahip olmayı öneririz. Bu nedenle, functions.php düzenlemek için bir kod görüntüsü kullanın, önce eklentiyi yükleyin ve etkinleştirin. Ardından, eklenti ayarlarını açın. Oradan, sitenize yeni snippet’ler ekleyebilirsiniz. Yeni sekmede yazı tiplerini seçebilir, Google yazı tipini açabilir ve web sitenizde kullanmak için yazı tipi türünü seçin. Sitede yazı tipi arama özellikleri kullanabilir veya sadece keşfedebilirsiniz. Bizim durumumuzda Lato ailesini kullanacağız.
Yazı tiplerini seçtikten sonra yazı tipi sayfasına gideceksiniz. Sitenize eklemeden önce yazı tipini test edebileceğiniz önizleme seçeneğini göreceksiniz. Bundan sonra, kullanmak istediğiniz stili seçin. Örneğin, düzenli ve cesur bir güç seçeceğiz.
Seçiminizi doğru panelde inceleyebilirsiniz. Stil ekledikten sonra, WordPress’e sabitlemeye hazırsınız. Bunu yapmak için Font Family bağlantısını sekmeden kopyalayın. Sitenize yazı tipleri ekleyin, aşağıdaki görüntüleri kopyalayın ve kod snippet eklentisine yapıştırın. <? Php Wpb_add_googal_fonts function () { wp_enqueue_style (‘wpb-google-bonts’, ‘https://fonts.googleapis.com/css2?family=lato: eğitim korumalı]; 700 & display = swap’, false); } Add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);
?> Seçtiğiniz yazı tipiyle yazı tipi URL’sini değiştirdiğinizden emin olun.
Bundan sonra, numuneyi kaydedin ve etkinleştirin. WordPress sitenize Google yazı tipini başarıyla eklediniz! Bu görev için bir eklenti kullanmak istemiyorsanız, yukarıdaki kodu işlevlere yapıştırın. Bundan sonra yeni bir yazı tipi uygulayın, küçük bir CSS ile yeni bir yazı tipi uygulayabilirsiniz. Örneğin, gövde yazı tiplerini düzenlemek için, ayardaki ek CSS bölümüne aşağıdaki kodu ekleyebilirsiniz. gövde {
Yazı tipi ailesi: ‘lato’, sans-serif;
}
Değişiklikleri yayınladıktan sonra, vücut yazı tiplerinin nasıl değiştiğini göreceksiniz. Ayarlamalar kullandığınız için, önizleme bölümünde hemen değişiklikleri göreceksiniz. Sitenizdeki diğer öğeleri değiştirmeniz gerekiyorsa, yukarıdaki kodu değiştirmeniz ve değiştirmek istediğiniz öğeleri ve yazı tipi türünü belirlemeniz gerekir. Örneğin, tüm H3 başlıklarını yeni yazı tipine değiştirmek istiyorsanız, şöyle bir şey yazacaksınız: H3 {font-family: ‘lato’, sans-serif; } Bu şekilde, sınırsız bir Google yazı tipi ailesi ekleyebilir ve WordPress sitenizi ayarlayabilirsiniz. 3) Style.css (@Import) WordPress’e Google yazı tipini eklemenin başka bir yolu style.css dosyasıdır. Bu kez, PHP kodunu kullanmak yerine, yeni yazı tipi grupları eklemek için style.css web sitesini düzenleyeceksiniz.
İlk yazı tipini seçin, Google yazı tipini açın ve sitenizde ne kullanmak istediğinizi seçin. Gömme bölümünün altında @Import modunu seçin.
Sitenize yazı tipleri ekleyin Şimdi panel benzersiz bir CSS kodu görüntüleyecektir. Kodu kopyalayın ve WordPress kontrol panelinizdeki ek CSS’ye yapıştırın. Ardından, yayın düğmesine basın. Bundan sonra yeni bir yazı tipi uygulayın, yeni bir yazı tipi nereye uygulamak istediğinize karar verebilirsiniz. Örneğin, bir sandalyede Kufam yazı tipini seçtik, bu nedenle gövde yazı tipini değiştirmek için aşağıdaki CSS kodunu kullanın: Body {
Yazı tipi ailesi: ‘Kufam’, sandalye;
} Gördüğünüz gibi, önizleme bölümü otomatik olarak değişiklikleri doğrudan günceller ve görüntüler.
Aynı şekilde, tüm H2 başlıklarına yeni bir yazı tipi uygulamak istiyorsanız, kullanmanız gereken kod: H2 {
Yazı tipi ailesi: ‘Kufam’, sandalye; } Bu, yeni başlayanlar tarafından bile kullanılabilecek başka bir çok basit yöntemdir. Ve iyi olan şey, eklentiye ihtiyacınız olmamasıdır. 4) Header.php dosyasını düzenleyin. WordPress sitenize Google yazı tipini eklemek için dördüncü yöntem, header.php dosyasını düzenlemektir. Daha önce WordPress’te başlıkları nasıl düzenleyeceğimizi görmüştük, bu nedenle gönderiyi okuduysanız, bu kolay olacaktır. Eğer yapmadıysan endişelenme. Bu bölümde size nasıl yeni bir yazı tipi gireceğinizi göstereceğiz. Biraz kodlama içermesine rağmen, bu yeni başlayanlar için bile oldukça basittir. Bunun için ihtiyacınız var: Google Font LinkStyle.css dosyasına giden yol
Her birini nasıl alacağına bakalım. Google Font Link Yazı Tipi Yazı Tipi Bağlantısı Google Font web sitesinden alınabilir. Kullanmayı ve seçmeyi planladığınız yazı tipini bulun. Adres çubuğunda yazı tipi URL’sini göreceksiniz. Style.css’i şimdi alın, Path Style.css nasıl bulacağınızı görelim. CPanel erişiminiz varsa, site kontrol panelinizi girin ve dosya yöneticisini açın. WP-Content klasöründe, temalar adı verilen bir klasör göreceksiniz. Kurduğunuz tüm temalar burada. İleri adım atmadan önce, web sitenizin aktif temasının ne olduğunu bilmeniz gerekir. Aktif temanızı WordPress kontrol panelinin görünümü altında bulabilirsiniz.
Örneğin, bizim durumumuzda, bu yirmi yirmi.
CPanel’de WP-Concent> Tema> Yirmi Yirmi’ye gideceğiz.
Sol panelde, tema dosyanızın yolu göreceksiniz. Kopyala.
Örneğimizin ardından şöyle bir şey aldık: public_html/wp-concent/themes/yirmitwenty. Şimdi, tek yapmanız gereken public_html bölümünü silmek, orada bir alan adı eklemek ve kodun sonunda dosyalar / stil.css’den bahsetmektir. Yani yeni kod bu gibi olacak www.example.com/wp-content/themes/twentytwenty/style.css. Tarayıcınızdaki URL’yi açtığınızda, style.css dosyası yüklenir. 404 hata sayfası alırsanız, bu, style.css dosyanızın yolunun yanlış olduğu anlamına gelir. Google Font ve Style.css bağlantısını ekleyin Yazı tipi bağlantısını ve style.css yolunu aldıktan sonra, WordPress sitenize Google yazı tipini eklemek için yapmanız gereken tek şey kodu alttan kopyalamak ve eklemektir. header.php tema dosyası. URL’yi yazı tipinizle değiştirmeyi ve stilinize giden yolu kendinizle değiştirmeyi unutmayın. Header.php dosyasını değiştirme rahatsız edici hissediyorsanız, kodu eklemek için ekleme başlıkları ve altbilgi eklentisini kullanabilirsiniz. Bu aracı nasıl kullanacağınıza bakalım. Header.php’yi ilk eklenti ile değiştirin, yük ve etkinleştirme Sitenizdeki üstbilgiyi ve altbilgiyi ekleyin.
Bundan sonra, ayarları aç> üstbilgiyi ve altbilgiyi ekleyin. Orada üç blok göreceksiniz. başlık Gövde dipnot Kodu başlıya ekleyeceğinizde, yukarıdaki kodu yazı tipi URL’niz ve style.css yoluyla başlık bölümündeki script.css yoluyla yapıştırın.Ardından, değişiklikleri kaydetmeyi unutmayın.
Vücut ve altbilgi parçalarını boş bırakabilirsiniz, çünkü orada herhangi bir değişiklik yapmazsınız. Sadece yapıştırdığınız kod etiketinin hemen üstünde olacaktır. Eklenti kullanmıyorsanız, HTML kodunu bölümüne eklediğinizden emin olun. Değilse, işe yaramaz! Hepsi bu, entegrasyonu tamamladınız ve sitenize Google yazı tipi eklediniz! Google Font Pro İpuçları Sitenize Google yazı tipini ekle yalnızca ilk adımdır. Bundan sonra, sitenizi daha fazla optimize etmenize yardımcı olacak bazı profesyonel ipuçlarımızı kontrol etmenizi öneririz. Google Font yerel olarak barındırır Google Fonts, birçok ücretsiz yazı tipi içeren bir çevrimiçi kitaplıktır. Hizmetlerini sitenizdeki yazı tiplerini sabitlemek için kullandığınızda, sunucularına bir istek gönderecek ve istenen içeriği alacaksınız. Google yazı tipi sunucusu teknik sorunlarla karşı karşıya kalırsa, web sitenizin performansını da etkileyebilir. Bu sorunu ortadan kaldırmak için yerel sunucunuzda yazı tipleri göndermeyi düşünebilirsiniz. Bunu yaparsanız, ek harici istekler göndermenize gerek yoktur. Ancak, sunucu kaynaklarınızı harcayabileceğini unutmayın. DNS PrefetingChing Etkinleştir WordPress önbellekleme eklentisinin çoğu DNS önceden yazma adlı bir özellik ile birlikte gelir. Fikir, harici bir HTTP isteği gönderdiğinizde, web siteniz daha yavaş olacaktır. Bunu düzeltmek için, dış talebi azaltmak için alabileceğiniz harici URL’yi girmenizi sağlayan DNS önleme özelliğini kullanabilirsiniz. Aşağıda, WP roket eklentisinden DNS önleme bölümünün bir örneği verilmiştir. Yapmamız gereken tek şey, yer almak ve değişiklikleri kaydetmek için URL’nin altına Google Yazı Tipleri etki alanını yazmaktır. Yazı tipi ağırlığını sınırlamak için sınırlı, yazı tipi ağırlığını kullanabilirsiniz. Yazı tipi ağırlığının mevcut birçok seçeneği var: İnce
Ringan ekstra
Lamba
Düzenli Şu anda Yarı arkalık Cesur Ekstra kalın
Siyah
Genellikle, site başlıklar için düzenli ve cesur yazı tipleri kullanır. Yani, stili seçtiğinizde, yalnızca kullanmayı planladığınız stili seçin. Değilse, sunucuya kullanmayacağınız ekstra ağırlık eklemek, HTTP isteklerinde bir artışa neden olur. Sonuç Genel olarak, Google yazı tipini WordPress’e eklerseniz, sitenizin tipografisini ayarlayabilirsiniz. Sadece web siteniz daha iyi görünmekle kalmayacak, aynı zamanda müşterilerinize daha iyi bir deneyim de sağlayacaksınız. Bunu yapmak için çeşitli yöntemler gördük:
Eklentilerle
Function.php dosyası aracılığıyla
Style.css aracılığıyla
Header.php dosyalarını düzenleme
