Web Sitelerinde Farklı Font Kullanımı

Flash uygulaması dışında web sitesi hazırlama yöntemlerinde (html, php, asp) yaratıcılığınızı kullanırken bazen font sorununa takılmanız içten bile değil. Flash ile hazırlanan sitelerde istediğiniz fontu kullanma gibi bi şansınız varken tasarımlarınızda da farklılığa gidebilmenizin yolu açılmış oluyor. Şimdi burda yazacağım ücretsiz bir Google hizmeti ile Arial, Tahoma, Times  New Roman ve benzeri sistem fontları dışında da sitelerinizde veya bloglarınızda farklı fontlar kullanma şansına erişmiş olucaz. Gerçi bu hizmetle de olsa şu aşamada hala tüm fontları kullanma gibi bir şansımız yok ama ilerleyen zaman içerisinde de özellikle HTML 5 ile bu sorunu da kökten halledilebileceğini düşünüyorum.

Neyse şimdi code.google.com/webfonts sayfasına tıkladığımızda açılan sayfa da; Cantarell, Cardo, Crimson Text, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Vollkorn, Yanoneaffeesatz isimlerinde listelenmiş kodları görücez. Bu kodlardan herhangi birini tıkladığımızda karşımıza seçtiğimiz font ile ilgili karakter listesini ve diğer özelliklerini gösterir bir sayfa çıkıcak.

Şimdi sitemizde kullanmak istediğimiz fontu tıkladıktan sonra açılan bu sayfada yer alan "Get the Code" butonu na tıklıyoruz. Bu bölümde fontu nasıl sitemize entegre edebileceğimiz anlatılıyor. Entegrasyon şu şekilde oluyor (örnek olarak "Cantarell" fontunu seçtim);

Öncelikle Embed the font into your page balığı altındaki link href ile başlayan kod satırını sitemizin "head" tag'ının arasına bir yerine ekliyoruz.

Sonra sitenin css dosyasına alttaki satırda yeralan h1 stilini ekliyoruz.

Daha sonra kullanacağımız tüm h1 tag'lari seçtiğimiz fontu kullanacaktır.
Eğer ki fontun diğer bold, italik ve benzeri karasteristik özelliklerini kullanmak isterseniz yanında + işareti bulunan "Font variants and advanced techniques" linkine tıklayıp aşağıda açılacak olan kodu "head" tag'ının arasına yerleştiriverin gitsin...