Normalde bu tarz işler için Google Font servisi yoğun olarak kullanılmaktadır.
Bu işlemi http://www.fontsquirrel.com/fontface/generator adresi üzerinden yapıyoruz. Öncelik olarak tasarımda kullandığınız yazı tipini kolay ulaşacağınız bir yerde hazır edin.
“Upload Font” deyip fontunuzu yükleyin.
Yükleme tamamlandıktan sonra “EXPERT…” seçeneğini seçin. Aşağıdaki seçeneklerin değiştiğini göreceksiniz.
“Font Formats“ kısmında “SVG” yi işaretliyoruz.
“Subsetting” kısmındaki “Custom Subsetting…” seçeneğini seçtikten sonra alt tarafta açılan “Language” kısmında “Turkish” işaretliyoruz.
Hemen altındaki “Single Characters” in yanındaki kutucuğa da “ç,Ç,ş,Ş,ı,İ,ğ,Ğ,ü,Ü,ö,Ö,ü,Ü” karakterlerini tanımlıyoruz.
Bu kısımları ayarladıktan sonra işlemimiz bitiyor. Dosyalarımızı indirmek için “Agreement” yanındaki “Yes, the fonts I’m uploading are legally eligible for web embedding.” kutucuğunu işaretlememiz ve “Download Your Kit” butonuna tıklamanız yeterli.
Dosyamız indikten sonra fontsquirrel’ın bizim için her şeyi hazırladığını göreceksiniz.
İnen dosyayı arşivden çıkardıktan sonra içerisinde bulunan “.eot”, “.ttf”, “.woff”, “.svg” uzantılı dosyalar bizim yazı tipi dosyalarımız. Öncelik olarak bu dosyaları bir klasörde toplayıp projenize dahil edebilirsiniz. Ben css klasörüm içine font adında klasör açıp kullanıyorum.
Ben bu örnekte deneme için “alegreyasans-thin” yazı tipini kullandım.
Yazı tiplerimizi yerlerine attıktan sonra yine indirdiğimiz ve çıkarttığımız dosyalara dönüp “stylesheet.css” isimli stil dosyası içinde bulunan
[css]
@font-face {
font-family: ‘alegreya_sansthin’;
src: url(‘font/alegreyasans-thin-webfont.eot’);
src: url(‘font/alegreyasans-thin-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘font/alegreyasans-thin-webfont.woff2’) format(‘woff2’),
url(‘font/alegreyasans-thin-webfont.woff’) format(‘woff’),
url(‘font/alegreyasans-thin-webfont.ttf’) format(‘truetype’),
url(‘font/alegreyasans-thin-webfont.svg#alegreya_sansthin’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/css]
kodlarını kendi style.css dosyamıza dahil ediyoruz. Bu kısımda önemli olan şey yazı tiplerinin yoludur. Ben font klasörü içerisinde kullandığım için bu şekilde düzenledim.
Bu aşamadan sonra tek yapmamız gereken yazı tipini kullanmak istediğimiz yere yukarıdaki @font-face kod bloğunun 2. satırında da bulunan;
[css]
font-family: ‘alegreya_sansthin’;
[/css]
kodunu yazmak ya da yapıştırmak.