Sitenizde TypeKit Nasıl Kullanılır: Adım Adım
@ Font-face seçicisini kullanarak web sitenize özel fontlar eklemek için son zamanlarda çeşitli seçenekler kırpılmıştır. TypeKit bu oyunda heyecan verici yeni bir oyuncu çünkü iki önemli alanda öne çıkıyor: kullanım kolaylığı ve mevcut yazı tipi zenginliği. Bu eğitimde, TypeKit'i sitenizde çalıştırmak ve çalıştırmak için birkaç küçük, süper basit adımdan geçeceksiniz. Burada herhangi bir gelişmiş teknik veya komut dosyası bulamazsınız, bu yüzden acemi bir web tasarımcısı olsanız bile bu bir cinch olmalı!
Tasarım Kaynaklarını Keşfedin
İlk: Kötü Haber
TypeKit web sitesine giderseniz, yalnızca bir davet için kaydolma seçeneğiniz olduğunu görürsünüz. Bu, hemen bir tane alacağınız anlamına gelmez, bu nedenle kaydolma şansı elde etmek için biraz beklemeniz gerekebilir. Neyse ki, size etrafı gösterebilmem için Design Shack site sahibi David Appleyard'dan bir davet almayı başardım!
Kayıt olmak
Kaydolduğunuzda, dört plandan birini seçmekle karşılaşırsınız. Hayal kırıklığı içinde başınızı sallarken, neden sadece ücretsiz bir hizmet olmadığını açıklayayım. Basitçe söylemek gerekirse, fontlar paraya mal olur. İnsanları ücretsiz indirmeyecekleri kaliteli yazı tipleri oluşturan ve satan birkaç mega yazı tipi dökümhanesi vardır. Eskiden iyi bir vatandaş olsanız bile, kaliteli bir yazı tipi için tam fiyat ödemiş olsanız bile, lisanslama sorunları nedeniyle bu yazı tipini sitenize koyamazsınız. Kısacası, yazı tipini gömmek, kullanıcıların kendileri için çalabileceği anlamına geliyordu. TypeKit, yazı tiplerini yalnızca web kullanımı için lisanslamak için büyük dökümhanelerle yaptığı fırsatlar sayesinde bu soruna odaklanmaktadır. Bunun anlamı, siteniz için çirkin, düşük kaliteli ücretsiz fontlarla değil, baskı dünyasında gördüğünüz gibi çok çeşitli profesyonel fontlarla sıkışmış olmanızdır. Uzun lafın kısası, kalite bir bedeli var. Seçim yapabileceğiniz planlar şunlardır:
Bu öğretici için ücretsiz demoyu kullanacağımı unutmayın, bu nedenle kırpılmış yazı tipi seçimlerini göreceğiz ve sitemizdeki iki özel yazı tipiyle sınırlı olacağız. Bunu göz önünde bulundurarak test alanımıza bir göz atalım!
Test Sitesi
Bu eğitim için tonlarca metin içeren hızlı ve kirli tek sayfalık bir site oluşturdum. “H1” etiketini kullanarak ana başlığı ve basit bir “p” etiketini kullanarak paragraf metnini şekillendirdiğimi bilmeniz gerekir. Test sitesini canlı (ve çok daha büyük) görüntülemek için burayı tıklayın veya aşağıdaki ekran görüntüsüne göz atın.
Kit Kurulumu
Bir plan seçtikten sonra bir sonraki adımınız ilk kitinizi oluşturmak ve bir URL ayarlamaktır. Belirli bir sayfa adresi eklemek yerine sitenin URL'sini bir bütün olarak eklemeniz gerektiğini unutmayın. Örneğin, az önce ana Tasarım Kulübesi URL'sini yazdığımı görebilirsiniz.
Kaydolduktan sonra, sitenize yerleştirmeniz için bir komut dosyası da verilmelidir. Sonra bununla ne yapacağımıza bir göz atacağız.
Yerleştirme kodu
TypeKit'in CSS'nizi geçersiz kılmasının anahtarı, html'nize eklemeniz için verdikleri aşağıdaki kod snippet'idir:
Bu kodu değiştirmek istediğiniz HTML sayfasının başlık bölümüne yerleştirmeniz yeterlidir. Yapmanız gereken tüm kodlama bu! Sadece basit bir kopyala yapıştır ve hazırsınız. Yazı tipi eklemeye başlamadan önce, güncellenmiş HTML sayfasını sitenizde yayınladığınızdan emin olun.
Yazı Tipi Ekleme
İster inanın ister inanmayın, neredeyse bitti. Geriye sadece yazı tipi seçmek ve nereye gideceklerini söylemek yeterli. Daha önce de belirttiğim gibi, TypeKit size ücretli planlardan birini seçerseniz seçebileceğiniz yüksek kaliteli yazı tipi seçenekleri sunar. Ücretsiz planın çok daha sınırlı (hiçbir şekilde zayıf olmasa da) bir seçimi olduğunu unutmayın. Ana başlığımızı değiştirmek için sinirli sıkıntılı bir yazı tipi seçeceğiz. Yazı tipi listesinin sağ tarafında bir dizi etiket göreceksiniz. Yalnızca sıkıntılı yazı tiplerini görmek için “sıkıntılı” etiketine tıklayın.
İstediğinize göz atabilir ve seçebilirsiniz. Beğendiğiniz bir tane bulduğunuzda, "ekle" düğmesini tıklayın (Bodedo'yu seçtim). “Ekle” düğmesine tıkladıktan sonra, kit düzenleyici penceresi açılmalıdır.
Kit Editörü
Bir yazı tipi ekledikten sonra, size aşağıdaki pencere gösterilmelidir:
Burası, seçtiğiniz yazı tipini sitenize uygulayacağınız yerdir. Düzenleyicinin sol üst köşesinde, kodunuzda kullanabileceğiniz özel bir seçiciye dikkat edin (bizim durumumuzda .tk-bodedo). Sitenizdeki koda girebilir ve yazı tipini değiştirmek için burada bulunan herhangi bir seçiciyi değiştirebilirsiniz. Ancak bunun yerine yapacağımız şey, TypeKit'e sitemizde kullandığımız mevcut etiketleri anlatmaktır. Daha önce söylediğim gibi, ana başlığımız sadece bir "h1" etiketidir, bu yüzden tek yapmamız gereken "seçiciler" altındaki alana "h1" (tırnak işaretleri olmadan) yazın ve add tuşuna basın.
Şimdi yayınla düğmesine basın. Bu kadar! Gerisini TypeKit yapacak. Bir iki dakika sonra sayfanızı yenileyin ve yazı tipinin göründüğünü görmelisiniz.
CSS'nizi Ayarlama
TypeKit ile ilgili en güzel şeylerden biri, yalnızca yazı tipinin yerini almasıdır. Yazı tipiyle ilgili tüm ayarlar hala CSS'nizde kontrol edilebilir. Paragraf kopyasına özel bir yazı tipi ekledikten sonra test sayfama göz atın.
Yeni yazı tipinin mevcut satır yüksekliği ayarlarımla gerçekten garip göründüğüne dikkat edin. Çok yayılmış ve şimdi çok daha fazla dikey alan tüketiyor. Bu sorunu gidermek için CSS dosyama yeni girdim ve paragraf kopyamın satır yüksekliğini aşağı çevirdim. CSS'mde gerçek yazı tipinin dışında yaptığım herhangi bir değişiklik, sitemdeki yeni yazı tipini etkiler. Böylece kalbinizin içeriğine stil uygulayabilirsiniz ve özel yazı tipiniz yerinde kalır! İşte benim ayarladığım çizgi yüksekliğim.
Tamamlanmis urun
TypeKit'i çalışırken görmek için bitmiş siteye bir göz atın. Başlamadan önce sitenin tartışmasız çok daha çekici olmasına rağmen, TypeKit'in faydalarını kolayca görebilirsiniz. Gördüğünüz özel yazı tiplerinin bilgisayarınızda bulunmadığını, ancak mükemmel bir şekilde önizleme yaptığını ve kolayca seçilebileceğini unutmayın. En iyi yanı, tüm bu kullanıcı dostu bir GUI ve yazmak zorunda değildi sadece bir kod snippet ile yapıldı olmasıdır! Ancak, TypeKit söz konusu olduğunda hep övgü ve övgü değilim. Sonuç olarak, mükemmelden daha az bulduğum şeyi kısaca tartışalım.
Eleştiri
Önce teknik hataları tartışalım. “Yayınla” düğmesine bastığınızda site güncellenmeden önce bir dakika beklemeniz gerektiğini daha önce belirtmiştim. Kodlanmış değişikliklerin hemen güncellendiğini görmeye alıştığınızda, bu son derece sinir bozucu olabilir. Sinir bozucu kısım tutarsızlıktır. Bazen değişiklikler neredeyse anında etkili olurken, diğerleri değişikliğin gerçekleşmesini görmek için birkaç dakika boyunca yenile düğmesine basmanızı bırakır. Ayrıca sitenin kendisiyle ilgili bazı sorunlar yaşadım. Kit editörü penceresi benim için zamanın yaklaşık% 50'sini başlatmayı reddediyor, bunun yerine hiç bitmeyen bir yükleme animasyonu olan boş bir pencere alıyorum. Pencereyi kapatmak ve kit düzenleyiciyi yeniden açmak sorunu çözüyor, ancak yine de oldukça can sıkıcı bir durum. Son olarak, maliyet yapısı her tasarımcının haklı göstermesi kolay değildir. Elbette, sitenizde seçilebilir metin olması harika, ancak yılda 250 dolar için birçok kişi muhtemelen resim olarak süslü başlıklar eklemeye sadık kalacak.
Sonuç
Bu, TypeKit'i kullanmaya başlamak için bilmeniz gereken her şeyle ilgilidir. Kaydolup bir plan seçtik, ilk kitinizi ayarladık, sitenize yazı tipleri ekledik, değişikliklerinizi yayınladık ve özel yazı tiplerini uyguladıktan sonra CSS'nizi ayarladık. Bu uzun bir makale ama sadece süreci bu kadar küçük, yönetilebilir adımlara ayırdığım için. Tüm gerçeklikte, TypeKit'in birkaç dakika içinde sitenizde çalışmasını sağlayabilirsiniz. Davetiyeniz için kaydolun ve TypeKit ve bulduğunuz diğer özel yazı tipi çözümleri hakkında ne düşündüğünüzü bize bildirin. Aşağıdaki yorumları kullanarak veya Twitter üzerinden soru sormaktan çekinmeyin.
