Web Sitende Özel Font Nasıl Kullanılır (Önce Test Et)

Web sitende özel bir font kullanmak için font dosyasını siteye yüklersin, @font-face kuralıyla CSS’e nerede olduğunu söylersin ve sonra onu font-family ile kullanırsın. Bunların hiçbirini yapmadan önce fontu gerçek sayfalarında test edebilirsin: ücretsiz FontMee eklentisiyle bilgisayarından bir .woff2, .ttf ya da .otf dosyası yüklersin ve onu herhangi bir sitede tek tıkla görürsün; hiçbir şeyi değiştirmeden ve hiçbir şeyi yüklemeden.

Özel font nedir

Özel font, her bilgisayarda hazır bulunan fontlardan da Google Fonts’taki ücretsiz fontlardan da olmayan bir font dosyasıdır. Bir tasarımcıdan gelen marka fontu, satın aldığın ya da kendi yaptığın bir font olabilir. Genellikle .woff2, .woff, .ttf ya da .otf ile biten bir dosya olarak gelir. Henüz dosyan yok mu? Google Fonts ekleme rehberimiz ücretsiz olanları anlatıyor.

Web siteleri için en iyi seçim .woff2: küçüktür, sayfalar daha hızlı yüklenir ve güncel tüm tarayıcılar onu okuyabilir. .ttf ve .otf bilgisayarda kullandığın biçimlerdir. Tarayıcılarda da çalışırlar ama dosyalar daha büyüktür. Elinde yalnızca .ttf ya da .otf varsa test için bu gayet yeterli.

Adım 1: Önce gerçek bir sitede test et

Bir fontu yükleyip kod yazmak ve sonra beğenmediğini fark etmek bir öğleden sonrayı çalar. FontMee, Chrome’a yeni bir özellik kazandıran küçük bir ek olan ücretsiz bir Chrome eklentisidir ve fontları önce canlı bir sayfada denemene izin verir. Kendi dosyalarını da kabul eder. Kısa video paneli 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. Sitenden bir sayfayı aç 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. Yükle’ye bas ve font dosyanı seç. Aynı anda birden fazla dosya seçebilirsin, her biri en fazla 6 MB. FontMee fontu dosyanın adıyla adlandırır; yani my_brand_sans.woff2, my brand sans olur.
4. Onu Fontlarım altında bul. Yüklediklerinin kendi filtresi vardır ve Senin diye işaretlenir. Birinin üzerine gelip kalemle yeniden adlandırabilir ya da çöp kutusuyla silebilirsin.
5. Denemek için fonta tıkla. Değişiklikleri uygula: altında Her şey, Başlıklar ya da Metin’i seç. Boyut, kalınlık ve satır yüksekliği için Ayarla’yı kullan, karşılaştırmak için Orijinal font ile FontMee önizlemesi arasında geçiş yap.
6. Kendi sözcüklerini yaz. Örnek metin kutusuna gerçek bir başlık, bir isim ya da özel harflerini içeren bir cümle yaz; font onlarla nasıl başa çıkıyor gör.

Font dosyaların tarayıcında, bilgisayarında kalır. Hiçbir şey yüklenmez ve test yalnızca senin gördüğünü değiştirir; yani başka kimse fark etmez. Sonucu bir müşteriye göstermek ister misin? FontMee bir önce / sonra görseli yapabilir: nasıl olduğunu gör.

Adım 2: Font dosyasını sitene koy

Beğendiğinde font sitende yaşamalı, çünkü ziyaretçilerinin tarayıcıları yalnızca internette olan dosyaları yükleyebilir, senin bilgisayarındakileri değil. fonts adında bir klasör aç ve dosyayı oraya yükle; görselleri yüklediğin gibi: barındırmanın dosya yöneticisiyle, FTP ile ya da site oluşturucunun sunuyor olabileceği font yüklemeyle. Klasör şöyle görünebilir:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Basit, küçük harfli, boşluksuz dosya adları kullan (my-brand-sans.woff2, My Brand Sans (1).woff2 değil). Bu, “fontum görünmüyor” sorununun klasik bir nedenini önler.

Adım 3: CSS’e font hakkında bilgi ver

Şimdi CSS’ine, yani sayfaya nasıl görüneceğini söyleyen kurallara iki küçük şey yazarsın. Önce “bu adda bir font var ve dosyası burada” diyen bir @font-face bloğu. Sonra fontu kullanan normal bir kural.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Sade bir dille: ilk bloktaki font-family, senin uydurduğun bir addır. src dosyanın nerede olduğunu söyler, ikinci satır ise eski tarayıcılar için .ttf yedeğidir. font-display: swap, gerçek font gelene kadar metnini yedek bir fontla gösterir; böylece ziyaretçiler boş bir alana bakmaz. Alttaki kurallarda virgülden sonraki sözcük (sans-serif) o yedek fonttur ve hep bir tane eklemek iyi alışkanlıktır.

Bu CSS’i sitenin stillerini tuttuğu yere koy: style.css içine, WordPress’te Görünüm, Özelleştir, Ek CSS altına ya da site oluşturucunun özel CSS kutusuna. Dosyan başka bir klasördeyse url() içindeki yolu değiştir.

Kısayol: FontMee yazsın

FontMee’ye dönüp CSS’i kopyala’ya bas. Yüklediğin bir font için FontMee kurallarını yazar ve başlamak için bir @font-face satırı içeren bir yorum ekler. Dosya adın ve uzantın farklıysa, örneğin .ttf ise, onları değiştir. Her şeyin hazır gelmesini mi istersin? Kendi barındırman için ZIP indir’e bas. İçinde fonts klasöründe font dosyan, @font-face bloğunu içeren bir fonts.css, kurallarını içeren bir fontmee.css ve kısa bir README bulunan bir klasör alırsın. Klasörü yükle, iki stil dosyasını bağla, bitti.

Yayınlamadan önce kontrol edeceğin dört şey

• Lisansı kontrol et. Bilgisayarındaki bir font dosyasını bir web sitesine koymak kendiliğinden serbest değildir. Birçok lisans yalnızca masaüstü kullanımını kapsar ve ayrı bir web lisansı vardır. FontMee sana “kendi dosyan: yayınlamadan önce lisansını kontrol et” diye hatırlatır. Emin değilsen fontu nereden aldığını sor.
• Harflerini kontrol et. Örnek kutusuna özel karakterlerini içeren sözcükler yaz (ç, ğ, ı, ö, ş, ü). Bir font mükemmel görünüp yine de bazı harfleri eksik olabilir; o harfler o zaman yedek fontla görünür.
• Yedek bir font tut. Her font-family satırını serif ya da sans-serif ile bitir; font yüklenirken metin yine düzgün görünür.
• Hafif tut. Bir ya da iki font dosyası fazlasıyla yeter. Her ek dosya sayfayı biraz ağırlaştırır; elinden geliyorsa .woff2 seç.

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