Front-end Developer’lar arasında @font-face kullanımını bilmeyen yoktur sanırım. Önceleri sistem fontlarına bağlı olarak çıkan tasarımlar ve front-end development süreçleri, günümüzde yerine hayalimizdeki hemen hemen her şeyi tasarlayacak ve kodlayacak haline geldi. İşin kötü yanı da biz Türk tasarım ve yazılım geliştiricilerinin font seçeneğinin pek bulunmaması. Dünya çapında popüler olan çoğu fontun Türkçe’si bulunabilir düzeydeyken kimilerini bulmaksa işkence haline dönüşüyor. Hadi bulduk diyelim, tasarımda işledik diyelim Front-end tarafında @font-face kullanımında Türkçe karakterlerin bozuk çıkması insanı çileden çıkarıyor.

Tasarımcının kullandığı font, Photoshop’da düzgün, tüm Türkçe karakterleri sorunsuz gözükürken, @font-face’e çevrildiği anda bu fontlar patlıyordu. İşte tam bu noktada aslında sorunun fontlardan değil de bana bu çıktıyı sunan servis kaynaklı olduğunu düşündüm ki gerçekten de öyleydi. Her ne kadar alternatifleri çoğalmaya başlasa da @font-face generator adı altında “Fontsquirrel” iyi iş çıkarıyor. İşte bu anlatımı da “fontsquirrel” üzerinden yapacağım.

1. Fontlarımızı seçtikten sonra “expert” modu seçiyoruz.
2. Font formats bölümünden “svg” yi işaretliyoruz.
3.  Subsetting bölümünden “Subsetting..” seçiyoruz.
4. Language bölümünden “Turkish” i seçiyoruz.
5. Single Characters bölümünden “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Ü**”** harflerimizi ekliyoruz

Sonrasında da bilgisayarımıza dosyalarımızı yüklüyoruz. Bu kadar.