· 14 min read

Webflow'a Yazı Tipi Ekleme: Üçü Bir Arada ve Adım Adım

Webflow'a yeni yazı tipleri eklemeyi öğrenmek, sizi geleneksel web sitesi tarzlarından kurtarır.

Eğer rutini sevmeyen biriyseniz, hayatınızda ve işinizde değişiklik yapmak isteyebilirsiniz.

Webflow ile kolayca ve ekstra maliyet veya fatura olmadan yapılmış bir web siteniz olduğunu hayal ettiğinizde, değişiklikler yapmak ve benzersiz olmak isteyebilirsiniz.

Webflow'a yazı tipleri eklemeye başlamak, takip edilmesi kolay ve harika bir fikirdir.

Webflow'un Faydaları

Webflow herhangi bir kodlama bilgisi gerektirmeden web sitesi tasarımı yapmanızı sağlayan bir araçtır ve bu sayede basit ve maliyet açısından uygun bir şekilde web sitesi oluşturabilirsiniz.

Webflow iş sahipleri, pazarlamacılar veya serbest çalışanlar için işleri kolaylaştırır.

Bu nedenle, Webflow profesyoneller için tasarlanmış olsa da, herkes Webflow ile bir web sitesi oluşturabilir.

Neden insanlar Webflow kullanarak web sitesi yapmalı sorusuna gelince, işte sıralanacak bazı konular:

  • Webflow, duyarlı (responsive) tasarımlar ile duyarlı web siteleri oluşturmanıza yardımcı olur.
  • Etkileşimler ve animasyonlar sunar.
  • Kod bilmenize gerek yoktur çünkü kodlama görsel olarak kullanıcı arayüzünde yapılır.
  • Sıfırdan başlamak yerine, geliştirme ve tasarımı bir arada tutarsınız.
  • Webflow işinizi kolaylaştıran ve zaman kazandıran kendi son derece kullanışlı şablonlarına sahiptir.
  • Webflow ihtiyaç duyduğunuzda iletişim kurabileceğiniz yardımcı müşteri hizmetlerine sahiptir.
  • Özelleştirme konusunda Webflow çok çeşitlidir, farklı yazı tipleri ekleyebilir ve dilediğinizce yaratıcı olabilirsiniz.

Yazı Tipleri Sayfasını Nasıl Bulursunuz

İlk adımımız Yazı Tipleri sayfasına ulaşmaktır. Bunun için, Webflow'da bir hesap açmalısınız.

Bu en kolay süreçlerden biridir ve Webflow'un başlamak için ücretsiz olduğu düşünüldüğünde, kayıt olurken herhangi bir ücret ödemezsiniz.

Webflow kayıt olma sayfasında bir görüntü bölümü ve e-posta giriş bölümü

Hesabınızı oluşturduktan sonra, şablonlardan birini seçerek veya kendi tasarımınızı yaparak sayfanızı oluşturmaya başlamalısınız.

Webflow, seçebileceğiniz birçok ilgi çekici şablona sahiptir, bu yüzden onları tercih edebilirsiniz. Ardından web sitenizi kolayca özelleştirebilirsiniz.

Webflow'un şablonlarından biri olan web sitesi örneği

Artık web siteniz için bir şablonunuz olduğuna göre, sayfanızı öğrenmeye başlayabilirsiniz.

İki yan vardır ve web siteniz ortada durmaktadır.

Sol taraf web sitenizin teknik kısmına aittir.

Ve sağ taraf, Stil Paneli, sayfanın detaylarına aittir. Ayrıca, burada ince işlerle de ilgilenebilirsiniz.

Webflow'un Stil Panelinde tipografi

Stil Panelinden fırça ikonunun altındaki bazı başlıkları keşfedebilirsiniz.

Orada bir başlık bulacaksınız, "Tipografi".

Sonra, "Yazı Tipi Ekle" üzerine tıklayın, bu sizi Yazı Tiplerine ait yeni bir sekmeye yönlendirecektir.

Sıralı olarak Webflow şablonları ve yazı tipleri

Google Fonts'u Webflow'a Nasıl Eklerim?

Webflow'un Yazı Tipleri sayfasındaki ilk seçenek Google Fonts'tur. Bu sayede birçok farklı yazı tipine ulaşabilir ve çalışmalarınızda kullanabilirsiniz.

Webflow üzerinde Google Fonts seçimi

Adım 1: Yazı Tiplerini Keşfedin

Google yazı tiplerini listeden kolayca seçebilirsiniz.

Ayrıca, hangi yazı tipini kullanacağınıza karar vermeden önce, Google Fonts'a tıklayarak canlı ön izlemelerini görebilirsiniz.

"Google Fonts" seçeneğine tıkladığınızda, Google Fonts sayfasına yönlendirilirsiniz.

Webflow tarafından yönlendirilen Google Fonts sayfası

Oradan favori yazı tiplerinizi bulun ve seçmek için önceki sayfaya geri dönün.

Adım 2: Yeni Bir Google Yazı Tipi Ekleme

Açılır menüden seçim yaptıktan sonra, yeşil "Font Ekle" butonuna tıklayın. Yeni yazı tipiniz hazır.

Webflow'da Acme font ekleme

Ayrıca yazı tipinizi normal mi yoksa farklı bir tarzda mı kullanmak istediğinize karar vermeniz gerekecek.

Ziyaretçilerinizin web sayfanıza bakış açısını etkileyebilir.

Son olarak, seçtiğiniz yazı tipini istediğiniz zaman silebileceğinizi veya kullanımını durdurabileceğinizi unutmayın.

Webflow'a Özel Yazı Tipleri Ekleme

Özel yazı tipleri eklemek ilk başta biraz karmaşık gelebilir ve kulağa öyle gelebilir, ancak adım adım ilerleyeceğimiz için Google Fonts eklemek kadar kolay olacak.

Adım 1: Özel Yazı Tiplerini Edinin

Webflow'a özel bir yazı tipi eklemeye başlamadan önce, hangi yazı tipi ailesini kullanmak istediğinize karar vermelisiniz.

Beyaz bir arka plan üzerinde Webflow Özel Yazı Tipleri bölümünün görüntüsü

Ardından, güvendiğiniz web kaynaklarından bu yazı tiplerine ulaşmalısınız.

Adım 2: Webflow'a Özel Bir Yazı Tipi Ekleme

Öncelikle “Fontları Yükle” seçeneğine tıklayarak bilgisayarınızdan hedef dosyanızı bulun.

Webflow

Buradan favori fontunuzu seçin ve dosyaları “Yükle” butonuna tıklayın.

Adım 3: Yazı Tipi Ailesi Adını Düzenleme

Bu adımda yazı kalınlığını ve yazı stilini düzenleme şansınız var ve bir yazı tipi ailesi belirlemeniz gerekir çünkü aksi takdirde bir hata alırsınız.

Webflow üzerindeki yazı tipi aile seçimi

Bunu daha iyi açıklamak gerekirse, Webflow bir yazı tipi ailesi yazı tiplerini birlikte gruplandırmak için istiyor.

Bu cümle, aynı aileden başka bir yazı tipi eklemek isterseniz, bu yazı tiplerinin Designer'da aynı aile başlığı altında gruplanacağı anlamına gelir.

Adım 4: Yazı Tipi Görüntü Ayarları

Yazı tipi görüntü ayarları önemlidir çünkü yazı tiplerinin hızını belirler.

Bu nedenle, web sitenizin stratejik planına göre düzenleyebilirsiniz.

Ancak Webflow, yazı tiplerinin görünürlüğünü sağladığı için swap kullanımının daha uygun olduğunu önermektedir.

Beyaz arka planda Webflow üzerinde özel yazı tiplerini düzenleme

Adım 5: Yedek Yazı Tiplerini Düzenleme

Burada Yedek Yazı Tipleri kısmını göreceksiniz. Bu kısım, yüklediğiniz yazı tipinin ailesine göre değişebilir.

Yedek yazı tipleri oldukça önemlidir çünkü web sayfanızda yazı tipinizin yüklenmesi gecikirse veya bir sorun olursa, yazılar otomatik olarak yedek yazı tipleriyle görüntülenir.

Belirli bir yedek yazı tipi istiyorsanız, “Yüklenen Yazı Tipleri İçin Yedekler” bölümünden bu yazı tipini düzenleyebilirsiniz.

Adım 6: Özel Yazı Tipini Kullanmaya Başlayın

Adımları ve düzenlemeleri isteklerinize göre tamamladıktan sonra, Tasarımcı'ya geri dönmeniz gerekecek.

Orada yeni özel yazı tipini ve yapılan değişiklikleri bulabilirsiniz.

Küçük bir hatırlatma olarak düzenlemelerinizi değiştirebileceğinizi veya özel yazı tiplerini istediğiniz zaman silebileceğinizi unutmayın.

Adobe Yazı Tiplerini Webflow'a Nasıl Ekleriz?

Üçüncü seçenek Adobe Yazı Tiplerini eklemektir ve nasıl yapılacağını öğrenelim.

Webflow üzerinde Adobe Yazı Tipleri bölümü

Bir Adobe Yazı Tipine sahip olmak için bir Adobe Fonts hesabınızın olması gerekir ya da yeni bir hesap oluşturabilirsiniz.

Adım 1: API Token'a Sahip Olmak

Yazı Tipleri sayfasındaki linke tıklarsanız, Adobe Fonts hesap sayfasına yönlendirileceksiniz.

Adobe Fonts sayfası ve API token işaret eden hesap simgesi

Bir API token'a sahip olmak için, hesap simgesinin üzerindeki API Token sekmesine tıklamalısınız.

API token oluşturma sayfasına yönlendirildikten sonra, “Bana yeni bir token oluştur” seçeneğine tıklamanız gerekmektedir.

API token oluşturma butonunu gösteren Adobe API Token

Adım 2: Yeni Token Ekleme

İkinci adım, yeni token'ı kopyalayıp Webflow Yazı Tipleri sayfası > Bu site için Adobe Fonts API token'ı kısmına yapıştırmaktır.

Ardından değişiklikleri kaydetmek için Token'ı Kaydet butonuna tıklayın.

Webflow'da Adobe API token oluşturma ve kaydetme

Yapılan değişikliklerin görünmesinin zaman alabileceğini bilmelisiniz, bu nedenle Webflow sizi önceden bilgilendiriyor.

3. Adım: Entegrasyonlar Sekmesi

Yeni token'ı entegre etmek istiyorsanız, sadece projeyi değil, web sitesini de entegre etmek istiyorsanız, Entegrasyonlar Sekmesi'ne gitmeniz gerekmektedir.

\"Webflow

Bunu yapmak için, token'ı ilgili bölüme yapıştırmanız ve değişiklikleri kaydetmeniz gerekmektedir.

Eklediğiniz yeni token'ları kaldırmak istiyorsanız, yapmanız gereken tek şey silmek ve Değişiklikleri Kaydet butonuna tıklamak.

Bu yeni bir font eklememişsiniz gibi bir dönüşüm sağlayacaktır.

Webflow'a Font Eklerken Dikkat Edilmesi Gereken Önemli Noktalar

Dikkat etmeniz gereken bazı önlemler ve kullanmanız gereken bilgiler bulunmaktadır, örneğin:

  • Fontlar alfabetik sıralamaya göre eklenir. Bu yüzden yeni fontunuzu ararken sıralamaya göre kontrol etmelisiniz.
  • Font lisans anlaşmasını kontrol edin- web sitesinde kullanmaya uygun olup olmadığını veya yaratıcısının buna izin verip vermediğini kontrol edin.
  • Webflow size ücretsiz olarak özel font ekleme imkanı sunar, ancak bütçeniz için fontların ücretsiz eklenebilir olduğundan emin olmalısınız.
  • 2MB'dan büyük bir font dosyasını yükleyemezsiniz, bu yüzden eklemek istediğiniz dosyanın boyutunu önceden bilmelisiniz.
  • Hangi fontların eklenmeye uygun ve tarayıcılar tarafından desteklendiğini bilmelisiniz.

Sonuç Olarak

Webflow'un kullanışlı yazı tipleri olmasına rağmen, farklı platformlardan farklı yazı tiplerini ekleme imkanı sunuyor.

Bu nedenle, Webflow'a nasıl yazı tipi ekleyeceğinizi bildiğinize göre, yeni yazı tiplerini entegre ederek tarzınızı bulmayı deneyebilirsiniz.

Tüm bu üç işlem oldukça basit ve takip etmesi yeterince açıklayıcı.

Oluşturacağınız web sitelerinde yaratıcı olmaktan çekinmeyin.

Son olarak Webflow'a bir şans verin; en sevdiğiniz özellikleri ve sürecinizin nasıl geçtiğini aşağıdaki yorumlar bölümünde bizimle paylaşın!

Sıkça Sorulan Sorular

Q ve A yazılı yırtık bir kağıt

Özel Yazı Tipleri Kullanmak SEO’yu Nasıl Etkiler?

Özel yazı tipleri kullanmak, eğer yazı tipi dosyaları büyükse ve sayfa yükleme hızını yavaşlatıyorsa ya da erişilebilirlik ve okunabilirlik için optimize edilmemişse SEO'yu etkileyebilir.

Webflow Yazı Tiplerini Daha İyi Performans ve Erişilebilirlik İçin Nasıl Optimize Edebilirim?

Yükleme hızı ve okunabilirlik için optimize edilmiş web yazı tiplerini kullanın, yazı tiplerinin nasıl yükleneceğini ve görüntüleneceğini kontrol etmek için font-display kullanın ve yazı tiplerinizi farklı cihazlar ve ekran boyutlarında test ederek okunabilir ve erişilebilir olduklarından emin olun.

Webflow'da Değişken Yazı Tiplerini Kullanabilir miyim?

Evet, değişken yazı tiplerini kullanarak farklı ekran boyutları ve bağlamlara uyum sağlayan duyarlı tipografi oluşturabilirsiniz. Ancak yazı tipi dosyaları büyükse ve sayfa yükleme hızını yavaşlatıyorsa ya da tüm tarayıcılar ve cihazlar tarafından desteklenmiyorsa performansı etkileyebilir.

Google fontları ve Webflow fontları SEO ve Performans Açısından Nasıl Karşılaştırılır?

Hem Google fontları hem de Webflow fontları, SEO ve performans optimizasyonu için kullanılabilecek geniş bir web fontları yelpazesi sunar. Ancak Google fontları daha hızlı ve daha yaygın olarak desteklenebilir ve değişken yazı tipleri ve yazı tipi alt kümeleri gibi daha gelişmiş özellikler sunabilir.

İlgili Makaleler

Webflow hakkında daha fazla okumak isterseniz, bazı blog yazılarını önerebiliriz!