Bu yazımızda Css’te Font Face özelliği nedir?, Nasıl kullanabiliriz? onu öğreneceğiz. Font face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.
Öncelikle kullanmak istediğimiz fontu bilgisayarımıza indirmemiz gerekiyor. Bunun için birçok site var. Örnek olması için free-font sitesinden bir font indirdim. Google Fontlarını da kullanabilirsiniz. İndirdiğimiz bu fontu projemize dahil etmemiz gerekiyor.
Artık fontumuzu indirdik ve projemize dahil ettik. Şimdi de font-face özelliği ile bunu nasıl kullanıyoruz ona bakalım.
1 @font-face yazıp süslü parantezler içerisinde font-family özelliğine istediğimiz bir isim veriyoruz. Burada dilediğimiz ismi verebiliriz. Örneğimizde fontun ismi olan Brush Of Kent ismini verdim.
2 src özelliğine, projemize dahil ettiğimiz fontun url’ini yazıyoruz.
3 Son olarak artık nerede bu fontu kullanmak istersek font-family özelliğine yukarıda vermiş olduğumuz ismi (Brush Of Kent) yazmamız yeterli olacaktır.
Şimdi font-face özelliğini kullanmadan önceki ve kullandıktan sonraki durumunu tarayıcıdan inceleyelim.
|
1 2 3 4 5 |
<p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> @font-face { font-family: 'Brush Of Kent'; src: url('Brush Of Kent.ttf') format('truetype'); } p{ font-family: 'Brush Of Kent'; } </style> <p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. </p> |
Gördüğünüz gibi bilgisayarımızda hazır olarak gelen fontların dışında bir font kullandık.
FONTLARIN FORMAT TÜRLERİ
Fontların farklı format türleri vardır. Bunlar;
TrueType (TTF) : 1980’lerin sonlarında Apple ve Microsoft tarafından geliştirilen, hem Mac OS hem de Microsoft Windows işletim sistemlerinde en çok kullanılan font formatıdır.
OpenType (OTF) : TrueType üzerine kurulmuş ve Microsoft’un tescilli ticari markasıdır. OpenType fontları, bilgisayar platformlarında yaygın olarak kullanılıyor.
Web Açık (WOFF) : WOFF, 2009 yılında geliştirilen ve web sayfalarında kullanılan bir formattır. WOFF, esas olarak OpenType veya TrueType’ın sıkıştırılmış ve ek meta veriler içeren halidir. Amacı, bant genişliği kısıtlamaları olan bir sunucudan bir istemciye ağ üzerinden format dağıtımını sağlamak.
Web Açık (WOFF 2.0) : WOFF 1.0’dan daha iyi sıkıştırma sağlayan TrueType / OpenType font formatıdır.
SVG : Vektörel bir font formatıdır.
Gömülü OpenType (EOT) : Web sayfalarında gömülü font olarak kullanılmak üzere Microsoft tarafından tasarlanan ve OpenType formatının kompakt bir şeklidir.
Bir tarayıcı her formatı desteklemeyebilir. Bunun için font formatlarını birbirine dönüştürebilir veya kullanırken tüm formatları birden projemize dahil edebiliriz. Bunun için birçok site bulunuyor.
Örneğin fontsquirrel sitesine bakalım ve kullanımını adım adım yazalım.
1 Yukarıda indirmiş olduğumuz Brush Of Kent fontu ttf formatındaydı. Siteyi açtığınızdaUpload Fonts ile fontumuzu yükleyelim.
2 Sunulan 3 seçenekten Expert seçeneğini seçiyoruz.
3 Font-formats kısmından istediğimiz formatları seçiyoruz.
4 Character Encoding kısmından Mac Roman‘ı seçiyoruz.
5 Subsetting kısmından Custom Subsetting seçeneğini seçtikten sonra, Languagekısmından Turkish seçeneğini seçiyoruz.
6 Son olarak Agreement kısmından koşulları kabul edip dosyalarımızı indiriyoruz.
Bizim için indirilen dosyalar şunlar;
İndirilen bu font formatlarını projemize dahil ediyoruz ve stylesheet.css dosyasının içerisindeki font-face kodunu alıp kendi Css kodlarımıza ekliyoruz.
Gördüğünüz gibi elimizde olan bir font formatını, diğer tarayıcılarında destekleyeceği hale dönüştürmüş olduk.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> @font-face { font-family: 'brush_of_kentregular'; src: url('brush_of_kent-webfont.eot'); src: url('brush_of_kent-webfont.eot?#iefix') format('embedded-opentype'), url('brush_of_kent-webfont.woff2') format('woff2'), url('brush_of_kent-webfont.woff') format('woff'), url('brush_of_kent-webfont.ttf') format('truetype'), url('brush_of_kent-webfont.svg#brush_of_kentregular') format('svg'); font-weight: normal; font-style: normal; } p{ font-family: 'brush_of_kentregular'; } </style> <p> Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel. </p> |
Bu tabloda, tarayıcıların font formatlarını hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
| Font Format | IE | Chrome | Firefox | Safari | Opera |
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Desteklemiyor | 36.0 | 35.0* | Desteklemiyor | 26.0 |
| SVG | Desteklemiyor | 4.0 | Desteklemiyor | 3.2 | 9.0 |
| EOT | 6.0 | Desteklemiyor | Desteklemiyor | Desteklemiyor | Desteklemiyor |
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
