Web siteleriniz için hazırladığınız tasarımlarda çoğu zaman sistem fontlarıyla (yazı tipi) sınırlı kalmak istemezsiniz. Tasarımınıza uygun fontları önceleri yalnızca resim olarak kaydederek kullanabiliyorduk. Son zamanlarda ise bunun için farklı yöntemler (sIFR, cufon gibi) ortaya çıktı. Bu yöntemlerin temel işlevi yazı tiplerini flash veya javascript ile değiştirmek. Bu yöntemler ile ilgili daha detaylı bilgiye linklerden ulaşabilirsiniz.
Bunların yanı sıra Google’ın Web Fonts hizmeti ile ücretsiz olarak dağıtılan fontları sitelerinizde kullanabilirsiniz. Bunun için tek yapmanız gereken burada anlatıldığı gibi sitenize Google tarafından sağlanan CSS bağlantısını eklemek.
Yine benzer bir hizmeti ücretli olarak zengin bir font kütüphanesine sahip olan Typekit ile de alabilirsiniz. Ancak bu yöntemlerin ortak sıkıntısı ise genellikle Türkçe karakterleri barındırmaması.
Peki bu meselenin başka bir çözümü yok mu?
Bu meselenin çözümü kendi fontlarımızı tüm tarayıcılarda uyumlu formatlarını (ttf, svg, eot, woff formatları) oluşturduktan sonra CSS ile tanımlamak. Elimizde kullanmak istediğimiz font dosyası varsa bu formatları oluşturmak için online bir hizmet olan FontSquirrel‘e ait Font Face Generator servisini ücretsiz olarak kullanabiliriz.
Yukarıdaki ekranda Add Fonts butonuna tıklayarak kullanacağımız font dosyalarını seçtikten sonra kullanmak istediğimiz font’un kullanım haklarına sahip olduğumuza dair onay vererek font paketimizi oluşturup indirebiliriz.
Oluşturulan paketinin içeriğinde gerekli tüm tarayıcılar için gerekli formatta font dosyalarımız ve uygulamamızda kullanabileceğimiz CSS dosyamız oluşturulmuş halde bulunmaktadır.
Örnek CSS kodu:
@font-face { font-family: 'MetaRegular'; src: url('metamedium-roman-webfont.eot'); src: url('metamedium-roman-webfont.eot?#iefix') format('embedded-opentype'), url('metamedium-roman-webfont.woff') format('woff'), url('metamedium-roman-webfont.ttf') format('truetype'), url('metamedium-roman-webfont.svg#MetaRegular') format('svg'); font-weight: normal; font-style: normal; }
Bu kodu CSS dosyamıza ekleyerek font dosyalarımızı da CSS’te belirttiğimiz konuma kopyaladığımızda artık sitemizde dilediğimiz gibi kendi fontumuzu kullanabiliriz.
Örnek kullanım:
body{ font-family: 'MetaRegular'; }
Kolay gelsin 
