Sitede özel yazı tipi kullanmak
İnternet sitenizde özel yazıtipi (font) kullanmak istiyorsanız*, bu yazı işinizi görecek. Yapacaklarımız oldukça kolay.
Öncelikle bilmeniz gerekir ki, elimizde TrueType (TTF) biçiminde bir yazıtipi varsa Internet Explorer için bunu OpenType (EOT)`ye çevirmemiz gerekecek.
1. İlk etapta çevirme işlemini yapalım. Bunun için http://www.kirsle.net/wizards/ttf2eot.cgi sitesine** girin.
2. Upload a TrueType Font bölümündeki Gözat düğmesine tıklayarak bilgisayarınızdaki, sitenizde kullanacağınız, TTF uzantılı yazıtipini bulun.
3. Convert TTF to EOT! düğmesine tıklayın.
4. Kısa bir süre içinde sonuç sayfasına yönlendirileceksiniz.
5. Sonuç sayfasındaki Download Your Font başlığı altındaki Download segoepr.eot bağlantısını tıklayın. (Benim dosyamın ismi segoepr idi. Bu yüzden segoepr.eot yazıyor!)
6. EOT ve TTF uzantılı yazıtiplerinizi sitenizin kök dizinine yükleyin.
7. Sonra stil dosyanızı açın ve yazıtipini tanımlayın. Ya da sayfanızın <head></head> etiketleri arasına direkt de ekleyebilirsiniz. Nasıl kullanmak isterseniz.
<style type="text/css">
@font-face {
font-family: segoepr;
src: url("segoepr.eot") /* EOT file for IE */
}
@font-face {
font-family: segoepr;
src: url("segoepr.ttf") /* TTF file for CSS3 browsers */
}
</style>
8. Yukarıdaki kodlarla sadece yazıtipimizi tanımladık. Şimdi bir class oluşturmamız gerekiyor ki istediğimiz yerde yazıtipimizi kullanabilelim.
.MyCustomFont {
font-family: segoepr;
font-size: medium;
color: black
}
9. İş şimdi istediğimiz yerde class değerine MyCustomFont yazarak özel yazıtipimizi çağırabiliriz.
* Eklediğiniz yazıtipini sitenizde görüntülemiş olabilirsiniz. Fakat Türkçe karakterler görünmüyor olabilir. Bu durumda sorun, eklediğiniz özel yazıtipinin Türkçe karakter barındırmıyor olmasıdır.
** Örnek olarak önerdiğim site çalışmıyorsa, Google`da ttf 2 eot arayın. ttf 2 eot, TTF to EOT yani TTF`den EOT`ye anlamına gelir.
Resimdeki siteye bakmak isterseniz buraya tıklayın: Grup Orion
Yıldırım Erdemli'nin Sitede özel yazı tipi kullanmak yazısını siz de AddThis eklentimiz ile paylaşın: