CSS kullanarak .ttf yazı tipi nasıl eklenir?

Kodumla ilgili bir sorunum var. Çünkü sayfam için genel bir yazı tipi eklemek istiyorum ve bir .ttf dosyası indirdim. Ve bunu ana CSS'ye ekledim ama yazı tipim değişmeyecek.

İşte benim basit kodum:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
} 

Nerede yanlış yaptım bilmiyorum. Bana bu konuda yardımcı olabilir misin? Teşekkürler.

Tarayıcılar arası destek için sadece webfont için .ttf dosyası sağlamak yeterli olmayacaktır. Şu anda mümkün olan en iyi kombinasyon, kombinasyonu şu şekilde kullanmaktır:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Bu kod, web yazıtipi için .eot, .woff, .ttf ve svg formatına sahip olduğunuzu varsayar. Tüm bu süreci otomatikleştirmek için şunu kullanabilirsiniz: Transfonter.org .

Ayrıca, modern tarayıcılar .woff yazı tipine doğru kaymaktadır, bu nedenle muhtemelen bunu da yapabilirsiniz:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

Daha fazlasını buradan okuyun: http://css-tricks.com/snippets/css/using-font-face/

Tarayıcı desteğine bakın: Fontface kullanabilir miyim

Biçimlendirmeyi denedin mi?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

Bu makaleyi okuyun: http://css-tricks.com/snippets/css/using-font-face/

Ayrıca, tarayıcıya da bağlı olabilir.

Yazı tipi yüzünü şu şekilde kullanabilirsiniz:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

Bunun eski bir gönderi olduğunu biliyorum ama bu sorunumu çözdü.

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

src:url("../fonts/font-name.ttf");kök dizine ve ardından yazı tipi klasörüne veya dosyanızın bulunduğu yere geri dönmek için iki nokta kullandığımıza dikkat edin.

umarım bu hattın aşağısında birine yardımcı olur :) mutlu kodlama