Web Sitene Google Fonts Nasıl Eklenir (3 Kolay Yol)

Web sitene bir Google yazı tipi eklemek için iki küçük iş yaparsın: yazı tipini yüklersin, sonra metnine onu kullanmasını söylersin. Yüklemek için sayfanın başlığındaki (head) bir <link> etiketini, CSS’inin en üstüne bir @import satırını ya da kendi barındırdığın yazı tipi dosyalarını kullanabilirsin. Doğru satırları almanın en hızlı yolu ücretsiz FontMee eklentisi: yazı tipini kendi sitende dener, CSS’i kopyalaya basar ve yapıştırırsın. Aşağıda üç yolun hepsi var, olduğu gibi kopyalayabileceğin kodla.

“Yazı tipi eklemek” gerçekte ne demek

Yazı tipini bir akşam yemeğindeki misafir gibi düşün. Önce onu davet etmen gerekir, yani sayfanın yazı tipi dosyasını indirmesi gerekir. Sonra ona bir yer göstermen gerekir, yani metnine onu kullanmasını söylemen gerekir. Daveti atlarsan yazı tipi hiç gelmez. Yeri atlarsan köşede oturur, metnin ise eski yazı tipiyle devam eder.

İkisi de CSS ile yazılır, yani bir sitenin nasıl görüneceğini söyleyen stil kuralları ile. Davet, sayfanın head bölümüne (HTML’in en üstünde, tarayıcının kurulum talimatlarını okuduğu görünmez alan) ya da CSS dosyanın en üstüne gider. Masadaki yer ise aşağıdaki örneklerdeki gibi kısa bir kuraldır. Hangi yolu seçersen seç, bu iki iş aynı kalır.

1. yol: Sayfanın head bölümünde bir link etiketi

Google’ın kendi sitesinde gösterdiği yöntem bu. Sayfanın head bölümüne üç satır koyarsın: ikisi tarayıcıya Google’a bağlanmaya hazırlanmasını söyler, biri yazı tipini yükler. Genelde diğer yollardan biraz daha erken yüklenir, çünkü tarayıcı CSS’ini okumadan önce bile yazı tipini getirmeye başlayabilir.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Linkin son kısmı olan display=swap, tarayıcıya metni hemen yedek bir yazı tipiyle göstermesini ve gerçeği geldiğinde değiştirmesini söyler, böylece ziyaretçiler boş bir alana bakıp kalmaz. Kuralındaki virgülden sonraki kelime (serif) o yedektir ve Google her zaman bir tane eklemeni önerir. Sayfanın HTML’ini düzenleyebiliyorsan bu yolu kullan.

2. yol: CSS’inin en üstüne bir @import satırı

Bazen sayfanın head bölümüne dokunamazsın, yalnızca CSS’e erişebilirsin. WordPress’teki Ek CSS kutusu, birçok site oluşturucunun CSS bölümü ya da sade bir style.css dosyası böyledir. O zaman davet, CSS’in içinde yaşayabilir: en üstte durması gereken, diğer tüm kuralların üzerindeki tek bir satır olarak.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Yapıştırması en kolay olanı bu, ama genelde link etiketinden biraz daha yavaştır, çünkü tarayıcı yazı tipini ancak CSS’ini okuduktan sonra keşfeder. Küçük bir sitede fark etmezsin bile.

3. yol: Yazı tipi dosyalarını kendin barındır

Burada yazı tipi dosyalarını Google’dan indirirsin, kendi sitene yüklersin ve onlara işaret edersin, böylece ziyaretçilerinin tarayıcıları Google ile hiç iletişime geçmez. Kimi bunu gizlilik için seçer, kimi hız için, kimi de kuralların ülkeden ülkeye değişmesi yüzünden, o yüzden ziyaretçilerin için neyin geçerli olduğuna bak. Birkaç adım daha fazla, ama hiçbiri zor değil: bir klasörü kopyalarsın, sonra dosyanın nerede durduğunu söyleyen bir kural eklersin.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Google Fonts açık kaynaklıdır, bu yüzden ticari projeler dâhil indirip barındırabilirsin. Yavaş olan kısım, her dosyayı bulup indirmek ve her @font-face bloğunu elle yazmak. FontMee bunu senin için yapar, birazdan göreceksin.

Hangi yolu seçmelisin?

• Sayfanın HTML’ini düzenleyebiliyorsun: link etiketini kullan (1. yol).
• Yalnızca CSS’i düzenleyebiliyorsun ya da CSS kutulu bir site oluşturucu kullanıyorsun: @import kullan (2. yol).
• Ziyaretçilerin tarayıcılarının her şeyi kendi sunucundan yüklemesini istiyorsun: dosyaları barındır (3. yol).

Emin değil misin? 1. ya da 2. yolla başla. Sonra değiştirebilirsin, değişen tek şey yazı tipini yükleyen satır olur.

Doğru kodu FontMee ile al

Bu satırları elle yazmak, hataların çoğunun olduğu yer: eksik kalmış bir artı işareti, yazı tipinin sahip olmadığı bir kalınlık, başlıklarınla uyuşmayan bir kural. FontMee ücretsiz bir Chrome eklentisi, yani tarayıcıya yeni bir özellik kazandıran küçük bir ek, ve satırları senin yerine yazar. Önce bir yazı tipini gerçek sitende dener, nasıl göründüğüne bakar, sonra tam o seçimin kodunu kopyalarsın. 1.900’den fazla yazı tipi var ve video paneli iş başında gösteriyor.

1. FontMee’yi kur. Chrome Web Mağazası’ndan ekle. Ücretsiz ve hesap istemez. Chrome’daki yap-boz simgesine tıkla ve eklentiyi sabitle, böylece hep tek tık uzağında olur.
2. Sitene git ve FontMee simgesine tıkla. Panel sayfanın yanında açılır. Alt + Shift + F tuşlarına da basabilirsin. Chrome’un kendi sayfaları (Yeni Sekme, Web Mağazası, chrome:// sayfaları) değiştirilemez.
3. Yazı tipinin nereye gideceğini seç. Değişiklikleri uygula: altında Her şey, Başlıklar ya da Metin’i seç, sonra bir yazı tipine tıkla. Başlıkları ve metni ayrı ayrı yapabilirsin.
4. Gerçek sayfada kontrol et. Orijinal font ile FontMee önizlemesi arasında geçiş yap ve doğru görünene kadar boyut, kalınlık ve satır yüksekliği için Ayarla’yı kullan.
5. CSS’i kopyalaya bas. Dört sekmeli bir pencere açılır: CSS (@import yolu), HTML (link etiketi yolu), kullananlar için Değişkenler ve Tailwind. Kendi yoluna uyan sekmeyi seç, Panoya kopyalaya bas ve sitene yapıştır. FontMee Google’dan yalnızca yazı tipinin gerçekten sahip olduğu kalınlıkları ister, böylece bozuk bir linkle kalmazsın.
6. 3. yolu mu istiyorsun? Aynı pencerede Kendi barındırman için ZIP indir’e bas. Yazı tipi dosyalarının olduğu bir klasör, bir fonts.css, bir fontmee.css ve kısa bir README alırsın. Klasörü yükle ve iki stil dosyası linkini ekle.

Yayınlamadan önce kontrol edilecek dört şey

• Yalnızca kullandığını yükle. Her fazladan yazı tipi ve kalınlık sayfanı biraz ağırlaştırır. Çoğu site için iki yazı tipi ve iki kalınlık fazlasıyla yeter.
• Yedek bir yazı tipi bulundur. Her font-family’yi serif ya da sans-serif gibi genel bir adla bitir, böylece yazı tipi yüklenirken metin yine düzgün görünür.
• İhtiyacın olan harfleri kontrol et. ş, ğ, ı gibi harfler ve Kiril ya da Vietnam harfleri her yazı tipinde yok. Kopyalamadan önce kendi kelimelerini FontMee’de önizle.
• Lisansı kontrol et. Google Fonts açık kaynaklıdır ve ticari kullanım için ücretsizdir. FontMee’nin kod penceresi her yazı tipinin lisansını listeler, yani yayınlamadan önce görebilirsin.

Henüz bir siten yok mu? O zaman yazı tipi ikinci sırada gelir. Bir sitenin yaşayacağı bir eve de ihtiyacı var, kod yazmadan ev sahibi olmanın en hızlı yolu da bir site oluşturucudur.

Eklentiyi edin

FontMee ücretsiz; 1.900’den fazla yazı tipi, dört biçimde CSS’i kopyala, kendi barındırman için bir ZIP ve kendi yazı tiplerini yükleme dahil. Hesap yok, abonelik yok. Chrome Web Mağazası’ndan ekle ya da önce FontMee sayfasını oku.

Başlamadan önce bilmekte fayda var

Sık Sorulan Sorular