@font-face :

Her web sayfasının bir font’a ihtiyacı vardır. Tanımlanmadığı durumlarda bunu her web tarayıcısı farklı yorumlayabilir. Burada örnekte göreceğiniz ilk değer geçerli olan fonttur. O fontun web tarayıcısı tarafından okunamadığı yada tanımlanamadığı durumlarda ikinci font devreye girecektir.

Örnek

 @font-face {
    font-family: 'robotomedium';
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot');
    src: url('http://www.w3tr.com/file/roboto-medium_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff2') format('woff2'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.woff') format('woff'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.ttf') format('truetype'),
         url('http://www.w3tr.com/file/roboto-medium_0-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

  }

Codepen Ön izleme

Css Sözdizimi

Değer	Açıklama
font-family	Gerekli. Yazının adını tanımlar.
src	Gerekli. yazının bulunduğu konumu belirtmek için kullanılır.
font-stretch	Yazı tipi renginin nasıl olması gerektiğini belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-style	Yazı tipi stilinin nasıl olacağını belirtmek için kullanılır. Varsayılan değer “normal” dir.
font-weight	Fontun kalınlığını belirlemek için kullanılır. Varsayılan değer “normal” dir.
unicode-range	Yazı karakter aralığını belirtmek için kullanılır. Varsayılan değer “U+0-10FFFF” dir.
İnital
İnherit

Tarayıcı Desteği

TTF/OTF	4.0	3.5	9.0	3.1	10.0
WOFF	5.0	3.6	9.0	5.1	11.1
WOFF2	36.0	35.0	desteklenmiyor	desteklenmiyor	26.0
SVG	4.0	desteklenmiyor	desteklenmiyor	3.2	9.0
EOT	desteklenmiyor	desteklenmiyor	6.0	desteklenmiyor	desteklenmiyor