- Katılım
- 25 May 2014
- Mesajlar
- 832
- Tepkime puanı
- 362
- Puanları
- 63
- Konum
- Türkiye
- Web sitesi
- xenforodestek.net
Kullanacağımız yöntem @font-face olarak geçmektedir.
Kullanmış olduğum dosyaları da ekte verdim kullanmak isteyen kullanabilir.
@font-face nedir ?
İndirmiş olduğunuz dosyayı açın (Örnek: webfontkit-20150817-201812.zip) ve font adında bir klasöre çıkartın, indirmiş olduğunuz dosyaların içerisindeki stylesheet dosyasını açın.
Dosya içeriği muhtemelen şu şekildedir:
Burada yapmanız dikkat etmeniz gereken kısım font klasörünü atacağınız dizinin adresini doğru bir şekilde yazmaktır. Örnek olarak ben font klasörünü styles klasörüne atıcam yapmam gereken kodlardakiurl(‘ kısmından sonra gerekli dizini eklemem gereken kod /styles/font/şeklindedir.
Örnek verirsek yukarıdaki koda göre düzenlenmiş hali:
Dizin adresini eklediğimiz bu kodlarıda extra.css şablonuna ekliyoruz ve font klasörünü de gerekli dizine atıyoruz.
Son işlem ise font adımızın temamıza eklenmesi ve aktif edilmesi font adımız stylesheet dosyasında
kısmıdır.
Görünüm-Stil Özellikleri: General seçeneğine tıklıyoruz seçeneklerden Body ye tıklıyoruz ve yazı tipi kısmına font adımız olan djb_messy_amanda_goes_boldRg adı yazıyoruz.
Eğer mesajlarında yeni eklediğimiz font olarak belirlenmesini isterseniz
Stil Özellikleri-Message Elements seçeneklerden Message Text seçin ve Yazı tipi kısmına fontumuzun adınız yazın.
Ve sonuç:
Kullanmış olduğum dosyaları da ekte verdim kullanmak isteyen kullanabilir.
@font-face nedir ?
Lütfen içeriği görebilmek için
Giriş yap veya üye ol.
.- Vermiş olduğum linke tıklayın
- Upload fonts butonuna tıklayarak fontunuzu seçin
- Yes, the fonts I’m uploading are legally eligible for web embedding. seçeneğini işaretleyin ve Download your kit butonu ile gerekli dosyayı indirin.
İndirmiş olduğunuz dosyayı açın (Örnek: webfontkit-20150817-201812.zip) ve font adında bir klasöre çıkartın, indirmiş olduğunuz dosyaların içerisindeki stylesheet dosyasını açın.
Dosya içeriği muhtemelen şu şekildedir:
Kod:
@font-face {
font-family: 'djb_messy_amanda_goes_boldRg';
src: url('djb_messy_amanda_goes_bold-webfont.eot');
src: url('djb_messy_amanda_goes_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('djb_messy_amanda_goes_bold-webfont.woff2') format('woff2'),
url('djb_messy_amanda_goes_bold-webfont.woff') format('woff'),
url('djb_messy_amanda_goes_bold-webfont.ttf') format('truetype'),
url('djb_messy_amanda_goes_bold-webfont.svg#djb_messy_amanda_goes_boldRg') format('svg');
font-weight: normal;
font-style: normal;
}Örnek verirsek yukarıdaki koda göre düzenlenmiş hali:
Kod:
@font-face {
font-family: 'djb_messy_amanda_goes_boldRg';
src: url('/styles/font/djb_messy_amanda_goes_bold-webfont.eot');
src: url('/styles/font/djb_messy_amanda_goes_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/styles/font/djb_messy_amanda_goes_bold-webfont.woff2') format('woff2'),
url('/styles/font/djb_messy_amanda_goes_bold-webfont.woff') format('woff'),
url('/styles/font/djb_messy_amanda_goes_bold-webfont.ttf') format('truetype'),
url('/styles/font/djb_messy_amanda_goes_bold-webfont.svg#djb_messy_amanda_goes_boldRg') format('svg');
font-weight: normal;
font-style: normal;
}Son işlem ise font adımızın temamıza eklenmesi ve aktif edilmesi font adımız stylesheet dosyasında
Kod:
font-family: 'djb_messy_amanda_goes_boldRg';
tırnaklar içerisinde yazan
djb_messy_amanda_goes_boldRgGörünüm-Stil Özellikleri: General seçeneğine tıklıyoruz seçeneklerden Body ye tıklıyoruz ve yazı tipi kısmına font adımız olan djb_messy_amanda_goes_boldRg adı yazıyoruz.
Eğer mesajlarında yeni eklediğimiz font olarak belirlenmesini isterseniz
Stil Özellikleri-Message Elements seçeneklerden Message Text seçin ve Yazı tipi kısmına fontumuzun adınız yazın.
Ve sonuç:
