Merhabalar
Türkçe karakterler web tasarım camiamızın kabusları oldu tabi şu ana kadar. Normalde ne yapardık fontu indirip FontLab Studio ile editleyip projemize öyle dahil ederdik. Sonralarda Google Font çıktı da rahat ettik. E tabi google font da yetmedi bu sefer de bazı fontlarda Türkçe karakter problemimiz devam etti buna da çözüm olarak fontun diline ‘Latin, Latin Extended’ karakter kümelerini ekledik. Yer yer çözdü tabi ki de ama… Bazı bazı onlarında fayda etmediğini gördüm. Gelelim bu gibi durumlarda ki çözümümüze.
Örnek fontumuz ‘Lato’ olsun. Fontumuzu aşağıdaki gibi css dosyamıza ekliyoruz.
@import url(‘https://fonts.googleapis.com/css?family=Libre+Franklin&subset=latin-ext’);
fontumuzu kullandığımız alanlar genel olarak aşağıdaki gibi oluyor.
font-family: ‘Libre Franklin’, sans-serif;
Bu kısma kadar zaten standart yaptığımız şeyler. Şimdi sihirli bir dokunuşla türkçe karakterleri düzelteceğiz. Aslında yaptırdığımız birazda kandırma işlemi. Nasıl mı kandıracağız? Biraz göz zevkimize güvenerek fontumuza yakın ‘Latin Extended’ destekli fontları filtreleyeceğiz. İlk filtreyi fonts.google.com yardımı ile yapın (filtremele seçeneklerinde Languages bölümü var oradan seçebilirsiniz.) Filtreleme sonucu çıkan fontlardan göz zevkinize göre embed kodlarını ekleyin aşağıdaki gibi
@import url(‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,700&subset=latin-ext’);
vee geldik son dokunuşa. Şimdide eğer tema düzenliyorsanız ‘Libre Franklin’ fontunun geçtiği satırlardaki ‘sans-serif’ fontu yerine tırnak içinde ‘Source Sans Pro’ ile değiştirin. Şimdi kaydedin hadi geçmiş olsun 🙂 Son hali
@import url(‘https://fonts.googleapis.com/css?family=Libre+Franklin&subset=latin-ext’);
@import url(‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,700&subset=latin-ext’);
body {
font-family: ‘Libre Franklin’, sans-serif;
}