WordPress temanıza Google web yazı tipleri eklemek ister misiniz?
Google fontları, WordPress web sitenizde güzel web fontlarını kolayca kullanmanıza olanak tanır. Web sitenizin tipografisini, kullanıcı deneyimini ve estetiğini iyileştirmek için bunları kullanabilirsiniz.
Bu makale, Google web yazı tiplerini WordPress temalarına doğru şekilde nasıl ekleyeceğinizi gösterecektir.
Bu rehberde ele alacağımız konuların kısa bir özetini burada bulabilirsiniz.
- WordPress Temanız İçin En İyi Google Yazı Tiplerini Bulma
- Eklenti Kullanarak Google Fontlarını Temanıza Ekleme Yöntemi 1
- Tema Başlığına Google Web Font Ekleme Yöntemi 2
- Yöntem 3. Google Fontlarını Tema Stil Sayfasına Ekleme
- WordPress'te Google Fontlarını Düzgün Bir Şekilde Sıraya Koyma Yöntemi 4
- Bonus Section: How Web Fonts Affect WordPress Speed
WordPress Temanız İçin En İyi Google Yazı Tiplerini Bulma
Yapmanız gereken ilk şey, beğendiğiniz Google yazı tiplerini bulmaktır. Sadece Google Fonts web sitesini ziyaret edin ve kitaplığa göz atın.
Beğendiğiniz bir web güvenli font bulduğunuzda, farklı mevcut stilleri görmek için üzerine tıklayın.
Web sitenizde kullanmak istediğiniz stilleri seçebilirsiniz.
Ardından, bir kenar çubuğu açacak olan ‘Seçilen Aileleri Görüntüle’ düğmesine tıklayın.
Buradan, 'Web'de Kullanım' bölümünün altındaki kullanım talimatlarını göreceksiniz.
You will see that there are two different tabs for adding the font to your site
Birincisi, web fontları eklemenin önerilen standart yolu olan Bağlantı yöntemidir.
İkinci sekme, fontları CSS stil sayfanız aracılığıyla yüklemenize olanak tanıyan @import CSS yöntemini kullanır.
Bu yöntemlerin her birini nasıl kullanacağınızı ve artılarını ve eksilerini göstereceğiz.
Not: Bu yöntemlerden bazıları için WordPress tema dosyalarınızı düzenlemeniz gerekecektir. Bunu, barındırma kontrol panelinizdeki FTP istemcisini kullanarak veya Dosya Yöneticisi uygulamasını kullanarak web sitenize bağlanarak yapabilirsiniz.
Bağlandıktan sonra, /wp-content/themes/Tema-Adınız/ klasörünü ziyaret etmeniz gerekir. Buradan, bu eğitim için düzenlemeniz gerekebilecek tema dosyalarını bulacaksınız.
Daha fazla ayrıntı için, web'den WordPress'e kod parçacıkları nasıl kopyalanıp yapıştırılır konusundaki eğitimimize bakın: WordPress'te kod parçacıklarını kopyalayıp yapıştırma.
Eklenti Kullanarak Google Fontlarını Temanıza Ekleme Yöntemi 1
Bu yöntem için Google Fontlarını yüklemek üzere bir WordPress eklentisi kullanacağız.
Öncelikle, Yazı Tipi Eklentisi'ni kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Etkinleştirdikten sonra, tema özelleştiricisini başlatmak için Görünüm » Özelleştir sayfasına gitmeniz gerekir. Buradan yeni Yazı Tipleri Eklentisi sekmesini göreceksiniz.
Üzerine tıklamak eklenti seçeneklerini gösterecektir.
Web sitenizin farklı alanları için Google Fonts kullanmayı seçebilirsiniz.
Alternatif olarak, WordPress temanız için bir yazı tipi yüklemeyi de seçebilirsiniz.
Basitçe Gelişmiş Ayarlar » Yalnızca Yazı Tiplerini Yükle sekmesine geçin.
Buradan, WordPress temanız için yüklemek istediğiniz Google Yazı Tiplerini seçebilirsiniz.
Sadece yazı tipi adını yazın ve sonra seçin.
İşiniz bittiğinde, değişikliklerinizi kaydetmek için Yayınla düğmesine tıklamayı unutmayın.
Şimdi, yazı tiplerini web sitenizin farklı alanları için atamak üzere eklentinin gelişmiş özelliklerini kullandıysanız, bunlar otomatik olarak çalışacaktır.
Diğer yandan, yalnızca fontları yüklemeyi seçtiyseniz, onlar için özel CSS kuralları eklemeniz gerekecektir. Örneğin, web siteniz boyunca paragraf öğesi için bir fontu şu şekilde yüklersiniz.
p {
font-family: 'Open Sans', sans-serif;
}
Yöntem 2. Tema Üst Bilgisine Google Web Yazı Tipleri Ekleme
This method is the easiest way to add Google Fonts directly to your WordPress theme.
WordPress temanız veya alt temanız için header.php dosyasını düzenleyin. Ardından, Bağlantı kodunu WordPress tema stil dosyası bağlantı kodunuzdan önce kopyalayıp yapıştırın.
Here is how it would look like:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Temel olarak amaç, yazı tipi isteğini mümkün olduğunca erken yerleştirmektir. Bu, kullanıcının tarayıcısının sayfayı oluşturmadan önce yazı tiplerini indirmesini sağlar.
Bunu yaptıktan sonra, fontu temanızın CSS dosyasında kullanabilirsiniz:
h1 {
font-family: 'Open Sans', sans- serif;
}
Yöntem 3. Tema Stil Dosyasına Google Yazı Tiplerini Ekleme
Bu yöntem için, yazı tipi CSS'ini WordPress temanızın ana CSS dosyasına aktaracağız.
WordPress temanızın kök klasöründeki style.css dosyasını düzenleyin ve '@import' sekmesindeki kodu CSS dosyasının en üstüne ekleyin.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
Bu, demo web sitemizin style.css dosyasında nasıl göründüğüydü.
Önemli: CSS dosyanızın en üstüne @import satırını eklediğinizden emin olun.
WordPress'te Google Fontlarını Düzgün Bir Şekilde Sıraya Koyma Yöntemi 4
Daha önce bahsettiğimiz ilk iki yöntem, WordPress tema dosyalarınızı düzenleyerek fontları doğrudan eklemenizi gerektirir.
Tüm değişikliklerinizi yapmak için bir alt tema kullanıyorsanız bu iyi çalışır.
Öte yandan, bu değişiklikleri ana temada yapıyorsanız, temanızı bir sonraki güncellemede değişiklikleriniz kaybolacaktır.
Bunun daha kolay bir çözümü, Google yazı tiplerini WordPress temanızın kullanması için otomatik olarak yükleyen bazı kodları programatik olarak eklemektir.
Bunun için, siteye özel bir eklentiye veya özel bir kod eklentisi kullanarak bazı özel kod parçacıkları eklemeniz gerekir. Ayrıntılar için, WordPress'e özel kod ekleme hakkındaki eğitimimize bakın.
Kodu aşağıdaki kod parçasını WordPress web sitenize eklemeniz yeterlidir.
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Not: Eklemek istediğiniz Google fontlarının URL'si ile URL'yi değiştirmeyi unutmayın.
That’s all, WordPress will now use the Link method to automatically fetch Google Fonts you added.
Bunu web sitenizin kaynak kodunu görüntüleyerek doğrulayabilirsiniz, orada Google yazı tipleri stil sayfanızın web sitenizin altbilgi bölümüne eklendiğini göreceksiniz.
Bonus Section: How Web Fonts Affect WordPress Speed
Google yazı tipleri, sunucu konumları dünyanın dört bir yanında bulunan Google'ın devasa CDN ağı üzerinden sunulduğu için son derece hızlı yüklenir.
Bu yazı tipleri milyonlarca web sitesi tarafından kullanıldığı için, kullanıcıların bunları tarayıcılarının önbelleğinde zaten saklamış olma ihtimali yüksektir.
Bu, web sitenizin hızı üzerindeki performans etkisini azaltır. Tasarımınızda yalnızca bir veya iki web yazı tipi kullanarak bu etkiyi daha da azaltabilirsiniz.
Daha fazla ipucu için, yeni başlayanlar için WordPress performansı ve hızı hakkındaki tam rehberimize bakın.
Bu kılavuzun, Google Web Yazı Tiplerini WordPress temanıza nasıl kolayca ekleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, kodlama yapmadan sıfırdan özel bir WordPress teması oluşturma kılavuzumuza ve en iyi ücretsiz web sitesi barındırma hizmetleri listemize de göz atmak isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Jiří Vaněk
Bir web sitesine yerel olarak yazı tiplerini nasıl yükleyeceğiniz konusunda bilgi sağlamanız harika. Uzun süre hızla mücadele ettim ve her şeyi optimize etmeye çalıştım. Bu, birinin bana yazı tiplerini yerel olarak yüklememi tavsiye ettiği ilk sitedi ve gerçekten işe yarıyor. Sadece milisaniyelerdi, ama yine de sitenin hızı iyileşti. Bazen bu milisaniyeler PageSpeed Insights veya Google Search Console'da yeşil ve turuncu arasındaki farkı yaratır.
Armando
Bu videonun/talimatların 2015 tarihli olduğunu ve ekran görüntülerinin vb. farklı olduğunu fark ettim. Google Fonts kodunu gösterildiği gibi header.php dosyama yerleştirmeye çalıştığımda bir hata verdi. Bu yüzden bu eğitimin güncellenmesi gerektiğini mi düşünüyorum? Emin değilim ama... Teşekkürler.
WPBeginner Desteği
Geri bildiriminiz için teşekkür ederiz, mümkün olduğunda bu makaleyi güncellemeyi kesinlikle dikkate alacağız.
Yönetici
Wout
Makale için teşekkürler! Google Yazı Tiplerini sıraya koymak için işlevdeki http: yerine https: kullanın, böylece googleapis.com'a şifreli bir bağlantı etkinleştirilir...
WPBeginner Desteği
Thanks for pointing this out, we will be sure to update the links as soon as we are able
Yönetici
Sofya
Sanırım neden tüm bunları öğrenmemiz gerektiğini anlamak için 2017 yılındayız :”((
charles
Bu hala doğru yol mu?
Renee
Yazı tipinin görünmesini sağladım ama kalın olmasını nasıl sağlayacağımı bulamadım.
CSS'de yaptığım şeyin bir örneği şurada
font-family:”Open Sans”, sans-serif;
font-weight:bold;
header.php'ye eklediğim bağlantıda şunu ekledim:
i tried subbing 700 for bold but no luck…
any ideas?
şimdiden teşekkürler
Isaac Anderson
“Özelleştir” sekmesinde seçtikten sonra Google yazı tiplerinde istediğiniz yazı tipi ağırlıklarını kontrol ettiğinizden emin olun.
Louis
Mükemmel çalışıyor! Teşekkürler.
josh
Huh? Bunların hepsi ne anlama geliyor? Bir Google yazı tipini gönderime veya sayfama nasıl ekleyebilirim?
Shubham Kumar
Google web yazı tiplerini JavaScript kullanarak eşzamansız olarak içe aktarma hakkında ne düşünüyorsunuz, burada belirtildiği gibi:
Teşekkürler
Shubham
Jordan
Hızlı bir soru – wp_enqueue_style() için kod referansına baktım. İlk argümanı, stil sayfasının adını belirten bir dizedir. Örneğinizde, ilk argüman için ‘wpb-google-fonts’ kullanıyorsunuz. Sitem için buraya ne koymam gerektiğini nasıl anlayabilirim?
pete rome
şeyleri tam olarak başlığa nereye yapıştırıyorum? her zaman görüyorum ama insanlar tam olarak nerede olduğunu asla açıklamaz.
Carla DeLauder
Bu fonksiyonda 'false' ne işe yarar? Diğer eklenen fonksiyonlar bunu içermiyor.
Teşekkür ederim.
Kev
argümanı başlık veya altbilgi için. Tüm betiklerin [neredeyse] tamamını başlığa yerleştirmek en iyi uygulama olduğundan, varsayılan olarak 'doğru' => altbilgi olur, 'yanlış' ise altbilgide değil, başlıkta olacağı anlamına gelir.
Unfortunately, font scripts stop everything else from loading, so putting them in the header sucks a litlte bit, which is why this article talks about making sure you’re only including the fonts you’ll actually use. On the flip side, putting them in the footer can cause default fonts like arial to load momentarily on your screen during painting until the webfont gets loaded. It’s a horrible caveat, but it is what it is.
İş akışıma dahil ettiğim bir pratik, fontları kullanımlarına göre koşullu olarak yüklemektir. Örneğin, belki “kalın” yalnızca blog gönderisi şablonlarında (single.php) h2 ve h3'lerde kullanılır, o zaman yalnızca single.php şablonunda olduğunda kalın betiği yüklemek için koşullu bir kuyruk yazarım.
Umarım yardımcı olur.
Kev
Ayrıca belirtmek gerekirse.
“Kalın” ile kastettiğim, bir yazı tipi ailesinin belirli bir kalın sürümüydü. <= sadece bir uyarı.
Kenneth John Odle
WordPress 3.3 itibarıyla wp_print_styles kullanımdan kaldırılmıştır.
Bram
Evet, bu makaleyi güncellemelisiniz.
WPBeginner Desteği
Güncellendi.
Yönetici
WPBeginner Desteği
Makaleyi güncelledik, artık doğru
wp_enqueue_stylefonksiyonunu ve wp_enqueue_scripts eylem kancasını kullanarak Google yazı tiplerini nasıl ekleyeceğinizi gösteriyor.Yönetici
isak
functions.php aracılığıyla iki yazı tipi ailesini nasıl sıraya koyarsınız?
Nisan
Google yazı tiplerini eklemek için Punch Fonts eklentisini kullanıyorum ama sadece başlık 1 için istediğim yazı tipini nasıl alacağımı bilmiyorum. Başlık 2-6 için bu yazı tipine ihtiyacım yok, bu yüzden Google yazı tipini yalnızca başlık bir için kullanmak istiyorum. Parametrede bunu nasıl yazarım?
Şu anda kullanıyorum: Oleo+Script+Swash+Caps:400
Melissa
Pekala, eğer biri takıldıysa, Easy Google Fonts adında bir eklenti de var. Çok yardımcı.
Melissa
Merhaba,
Üç yöntemi de denedim ancak hiçbiri tam olarak etkili olmadı. Görünüşe göre yalnızca belirli öğeler için geçerli oluyor ve stil sayfasında belirttiğim diğer öğeler için geçerli olmuyor.
Google Font'umun uygulanmadığı öğe için Element Inspector'ı kullandığımda, gördüğüm şey şu:
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;
Fontumun etrafındaki \\ ne anlama geliyor? Yani bir hata olduğunu gösteriyor gibi ama neyi yanlış yaptığımı anlayamıyorum? Ne olabilir? Daha yüksek önceliğe sahip bir kod benimkini geçersiz mi kılıyor? ama nerede? nasıl? Ahhh çıldırtıyor beni
Ali Sajjad
Sayın Editör, bu siteye tüm Google web yazı tiplerini eklemek ve sonra bunları kendi araçlarımda kullanmak istiyorum.
ama başlık dosyasına çok fazla bağlantı kullanmak istemiyorum. Başka bir yol var mı?
WPBeginner Desteği
Yalnızca kullanmak istediğiniz fontları ekleyin.
Yönetici
Anurag
So, I have got a blog ( http://www.goingtechy.com/ ). The problem I am having is that I want to optimize css delivery of the Google font that my site uses already. So, the site already have Google fonts. How can I optimize it?
Samantha
Bu gönderi için çok teşekkürler! Resmi html/css eğitimi olmayan biri için bu gönderinin basitliğine hayran kaldım.
Tanisha
So easy and go it to work perfectly. Thanks for this.
Greg
Merhaba,
Genesis ve Parallax Pro temasını kullanarak…
Ancak php vb. gibi şeylere yeni başlayan biri
Talimatlarınız doğrultusunda bu kodu fuctions.php dosyasına ekledim:
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() { echo ";
}
The headers that use the font above remain unchanged.
Sorular:
1. Yukarıdaki kodun eklemem gereken tek şey olduğunu varsaymak doğru mu?
2. Kod tam olarak nereye eklenmeli – fuctions.php dosyasının başına mı sonuna mı?
2. Kodda eksik bir şey var mı?
3. style.css dosyasına bir şey eklemeli miyim?
Yardımınız için teşekkürler
Saygılarımla
Greg
WPBeginner Desteği
Greg, bize uygun görünüyor. Google muhtemelen kodunuzdan yazı tipi bağlantısını yankıladığınız kısmı çıkardı. Evet, Google yazı tipinizi kullanmak istediğiniz seçiciler için stil kuralları ayarlamak üzere CSS kullanmanız gerekecek.
Yönetici
Tony Porto
None of the above is good enough, we all know “wp_enqueue_style( ‘google-font’)” is the “technically correct way to call a script, but in this case your <header will end up like this;
FONT 1:
FONT 2:
FONT 3:
FONT 4:
İyi değil, şöyle olmalı:
Akmal
Yukarıdaki kodu nereye yapıştırmalıyım? header.php dosyamda kodun son satırını hiçbir yerde bulamadım? Lütfen adım adım anlatır mısınız?
Teşekkürler.
WPBeginner Desteği
header.php dosyanızda
</head>etiketini bulacaksınız, bu kodu bu etiketten herhangi bir yere yapıştırabilirsiniz.Yönetici
Sarah
Aşağıdakileri tekrar yazmayı denedim ve hala hiçbir şey değişmiyor;
/* Fontları İçe Aktar
———————————————————— */
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts () { echo ‘’; }
/* Varsayılanlar
İlk seferde işe yaradı. Çok kafam karıştı!
Yardımınız için teşekkürler.
Sarah
Merhaba,
Kodu kopyalayıp yazı tipini değiştirdiğim için kendimle gurur duyuyordum, çünkü sitem için çok büyük bulmuştum. Başka bir şeye değiştirmeye çalıştığımda, bir şeyleri karıştırmış olmalıyım ve kodlarla oynasam bile yalnızca bir yazı tipi stili gösterilmeye devam ediyor. Şimdi aptal gibi hissediyorum – teknik konuşmuyorum. Yardımcı olabilecek var mı? Sayılarda olup olmadıklarını kontrol etmek için sayılarla ve sayılar olmadan denedim. Teşekkürler. Girdiğim en son kod bu.....
/* Fontları İçe Aktar
———————————————————— */
1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
2
3 function wpb_add_google_fonts() {
4 echo ”;
5 }
/* Varsayılanlar
———————————————————— */
WPBeginner Desteği
Umarım sayıları kodla girmediniz. Yoksa girdiniz mi?
Yönetici
Sarah
Sayı yok, ancak bu sefer bir şeyi kaçırıyorum. Masamda tam olarak bunlar var;
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
function wpb_add_google_fonts() {
echo ”;
}
Sarah
It seems the code worked…..on one computer. It hasn’t taken on two others that I use.
Can you please suggest why that might be the case?
Çok teşekkürler
Karissa Skirmont
functions.php'de birden fazla Google Fontu nasıl kullanabilirim?
Şunu vardı:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION ); }Ancak Dans Eden Yazı tipi ikinci bilgisayarımda, iPhone'umda veya tabletimde görünmüyordu.
Open Sans'ı kaldırdım ve çalışmaya başladı.
WPBeginner Desteği
@Karissa, wp_enqueue_style fonksiyonundaki ilk argüman, yüklediğiniz stil betiği için tanıtıcıdır. Bunun yerine bu kodu deneyin:
//* Enqueue Google fonts add_action( 'wp_enqueue_scripts', 'executive_google_fonts' ); function executive_google_fonts() { wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 ); wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 ); }1-click Use in WordPress
Yönetici
Karissa Skirmont
Boşverin, şöyle bir bağlantı kullanmam gerektiğini anladım:
‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’
Karissa Skirmont
Ah anladım, sayfayı yenilemeden ve yanıtınızı görmeden önce yukarıda yanıtladım.
Google'ın birden fazla yazı tipi seçtiğinizde verdiği bağlantıyı kullanarak, bu şekilde üretir ve farklı yazı tiplerini sitede canlı olarak daha kolay deneyebilirsiniz.
Chaitanya
Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support
Long Live WPBeginner…
Şerefe,
Chaitanya
Jenny
Eh, içe aktarmayı kullanmayı seviyorum. Benim için daha az iş çünkü tembelim~
pete rome
evet buradaki her yöntemde çok fazla iş var ve stil sayfasına bir şey eklemeye gerek olmamalı bir eklenti bulun
Jimmy Reynolds
A you mean the nerd way
mzilverberg
Burada eksik olan şey, birden fazla yazı tipi ağırlığı istiyorsanız Google'ın web yazı tiplerinin IE8 ve alt sürümlerinde çalışmasını sağlamak için koşullu yorumlardı. Örneğin:
<link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />Bu yüzden fontları yüklemek için bir fonksiyon oluşturdum: https://github.com/mzilverberg/LoadGoogleWebfonts
Betimlemem ayrıca uygun yedek URL'leri koşullu bir yorum içine yerleştirir.
Birkaç satır kodla bunu WordPress temanızın functions.php dosyasında da çalıştırabilirsiniz.
Greg
Google Fontlarını yönetici tarafına eklemeye ne dersiniz?
Yayın Kadrosu
Neden Google Yazı Tiplerini yönetici tarafına eklemek istersiniz?
Yönetici
Bruce Smith
Yönetici içerik düzenleyicisinde WYSIWYG'yi korumak için. Böylece yönetici düzenleyicisinde web sitemdekiyle aynı yazı tipi yüzünü görürüm.
Dan Merhar
Aslında aynı şeyi nasıl yapacağımı merak ediyordum (ve Google'da çıkan ilk sonuç bu).
WYSIWYG düzenleyicisine Google Webfont işlevselliği eklemek için eklentilerin var olduğunu biliyorum, ancak onları deli gibi yavaşlatıyorlar. Bunu daha fazla inceleyeceğim ve bir veya iki yazı tipi eklemenin kolay bir yolu olup olmadığını göreceğim.
Marleen
Paylaştığınız için çok teşekkürler, gerçekten memnun kaldım. Ben bir Genesis kullanıcısıyım ve @import'u kullanmaya başladım çünkü stil sayfasında zaten yapılıyor. Bu çözüme çok daha iyi hissediyorum.
Mutlu 2013!
jeff
Kodunuzda "TEMA STİLLERİNİZİ" bir şeyle mi değiştirmem gerekiyor??
Benimki STYLE.CSS, yoksa URL mi olmalı??
teşekkürler,
Jeff
Yayın Kadrosu
Evet, temanızın style.css yolunu oraya eklemeniz gerekiyor.
Yönetici
Charles
This is what I use…..
Bunu temanızın functions.php dosyasına ekleyin:
/*----------------------------------*/ /* Load CSS Files /*----------------------------------*/ if(!function_exists('load_theme_styles')) { function load_theme_styles() { if (!is_admin()) { $cssURL = get_template_directory_uri().'/css/'; $fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald'; // Registering New Styles wp_register_style('googleFont', $fontURL); wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen'); wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print'); // Enqueing Styles wp_enqueue_style('googleFont'); wp_enqueue_style('style'); wp_enqueue_style('print'); } } } add_action('wp_enqueue_style', 'load_theme_styles');Bu konuda ne düşünüyorsun?
Chris Reynolds
Google fontlarını eklemenin DOĞRU yolu budur. Her zaman wp_register_style/wp_enqueue_style kullanın
David
Daha da iyisi, IE 7 ve 8 için yazı tiplerini ayrı olarak sunmak üzere koşullu bir yorum ekleyin:
Buradan:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Bryan Nickson
Güzel eğitimler. Böyle bir şey istemiştim.. Tebrikler!!
Peter
JS seçeneği ne olacak, bu daha hızlı bir seçenek mi Yoksa bu daha mı iyi?. Teşekkürler
Yayın Kadrosu
Bu yöntem, önerilen yöntemlerin açık ara en iyisidir.
Yönetici
QLStudio
Cevabınızda CSS'yi sıraya koymuyorsunuz - bunu eklemenin en iyi yolu bu mu?
Chris
Great article! I think it would be pretty cool if wordpress, by default, had Google Fonts included into it, but this seems easy enough. Thanks for explaining!
Yayın Kadrosu
Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though
Yönetici
Aaron Crow
Harikasın adamım! Tam aradığım şey! Bu gönderiyi paylaştığınız için teşekkürler… Bunu temama eklemekle ilgili bir şeyler bulmak için sonsuza dek aradım. Sayfanıza denk geldiğim için mutluyum.
Anderson Curry
Harika bir yazı ve bunu yapan bir eklenti olsa bile, eklentisiz yolu öğrenmek her zaman daha iyidir.
Brad
Demek ki birkaç Google yazı tipi eklentisi kullanmayı kabul etmiyorsunuz. Bu durumda CSS dosyalarımı tekrar gözden geçirmem gerekecek.
sadhu
İkinci kısmı, yani genesis ekleme eylemi şeyine yazı tipi ekleme kısmını anlamıyorum.. bu, google web yazı tipi eklemenin başka bir yöntemi mi?
ve yazı tipinin tüm stillerini dahil etmek zorunda olmadığımızı biliyorum, ancak önerilen yöntem şudur: http://fonts.googleapis.com/css?family=Lora|Oswald
Sadece bir örnek olarak, eğer lora için sadece kalın stili ve oswald için açık stili istiyorsam, o zaman yazı tipi stillerini nasıl birleştirebilirim?
teşekkürler
Yayın Kadrosu
İkinci kısım YALNIZCA Genesis Kullanıcıları içindir. Genesis Tema Çerçevesini kullanmıyorsanız, o kısma ihtiyacınız yoktur. İstediğiniz gibi stilleri birleştirmek için işte nasıl yapacağınız:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
Yönetici
Anton
Google Webfontları ile gösterdiğiniz gibi Genesis Framework'te @font-face kullanmak istersem ne yapmalıyım, bunun için bir çözüm var mı.
Fontlarım inanılmaz yavaş yüklendiği için bütün gün arıyorum!
Selamlar
Gautam Doddamani
harika eğitim... aslında wp google fonts eklentisini kullanıyorum... bu eklentiyi mi yoksa yukarıda anlatılan manuel yolu mu önerirsiniz.. hangisi performans açısından daha verimli?
Yayın Kadrosu
O eklentiyi denemedim. Ancak bu tür eklentilerden neredeyse kaçınıyoruz çünkü tema dosyalarıyla daha kolay yapılabilir.
Yönetici
Gautam Doddamani
sweet…thanks will edit my theme instead of using a plugin
Pippin
Google fontları eklentisini kullanmaktan kaçınmak çünkü bir eklenti olması hiç de iyi bir sebep değil. Eklentiyi kullanmak, özellikle tema değiştirirseniz, onu temanıza dahil etmekten çok daha fazla esneklik sağlar.
Yayın Kadrosu
Bana kalırsa, yazı tipleri çoğu durumda stilistik öğeler olarak kabul edilir, bu nedenle temaya bağlıdır ve farklı bir temaya geçtiğinizde genellikle değişirler.
Siddanth Adiga
Harika bir yazı, sadece bunu arıyordum, css ve fontface ile deniyordum. Bunu da deneyeceğim teşekkürler
Konstantin Kovshenin
The “Right” way would be to use the wp_enqueue_style function
Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/
Yayın Kadrosu
Konstantin, sana kesinlikle katılıyorum. wp_enqueue_style fonksiyonu her zaman kullanılmalıdır. Nathan Rice'ın StudioPress'ın Google Fonts hakkındaki makalesinde önerdiği gibi ilk başta bunu yapmaya çalıştım. Google açıkça belirtiyor ki, font stilleri her şeyden önce yüklenmelidir. wp_enqueue_style kullanarak ve ardından bunları wp_print_styles ile yazdırarak, bu, ana stil sayfası zaten yüklendikten sonra öğeyi yazdırıyordu. Bu yüzden genesis_meta() kancasına bağlanmak zorunda kaldım. Her neyse, makalenizdeki düşüncelerinize kesinlikle katılıyorum.
Yönetici
Japh
I’m a little late to this, but I wanted to mention that you could still use
wp_enqueue_style, just set the priority higher so that they are loaded firstBob R
Harika bir eğitim. Ancak bir gözlemim var: makaledeki ilk görsel @import sekmesini göstermeliydi, değil mi?
Yayın Kadrosu
Hayır, öyle görünmesi gerekmiyordu.
Yönetici