Bagaimana cara memasukkan font .ttf menggunakan CSS?

120

Saya punya masalah dengan kode saya. Karena saya ingin menyertakan font global untuk halaman saya dan saya mendownload file .ttf. Dan saya memasukkannya ke dalam CSS utama saya tetapi font saya tidak akan berubah.

Inilah kode sederhana saya:

@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
}

Saya tidak tahu di mana kesalahan saya. Bisakah Anda membantu saya dengan ini? Terima kasih.

html css Jerielle
sumber
1
Dapatkah Anda memeriksa tab Jaringan di konsol browser Anda untuk memastikan bahwa font dimuat dengan benar?
rink.attendant.
Pergi dari sini
Tn. Alien
1
Apakah Anda yakin telah mengeja nama file font dengan benar? Bukankah seharusnya begitu oswald.regular.ttf?
1
Ya, saya memeriksa ulang nama font saya
Jerielle
5
@ Jerielle Jadi Anda memiliki font TTF dengan ekstensi tff? Apakah kamu benar-benar yakin tentang itu?

Jawaban:

174

Hanya menyediakan file .ttf untuk font web tidak akan cukup baik untuk dukungan lintas browser. Kombinasi terbaik saat ini adalah menggunakan kombinasi sebagai:

@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 */
}

Kode ini mengasumsikan Anda memiliki format .eot, .woff, .ttf dan svg untuk font web Anda. Untuk mengotomatiskan semua proses ini, Anda dapat menggunakan: Transfonter.org .

Selain itu, browser modern beralih ke font .woff, jadi Anda mungkin dapat melakukannya juga:

@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 */
}

Baca lebih lanjut di sini: http://css-tricks.com/snippets/css/using-font-face/

Cari dukungan browser: Dapatkah Saya Menggunakan fontface

Abhinav Gauniyal
sumber
dan jika Anda menggunakan GFont, periksa stackoverflow.com/a/30585464/1727470
Samy Bencherif
1
Bagi mereka seperti saya yang mudah bingung - jalur dengan garis miringurl('path/to/font.woff')
wunth
Saya memiliki masalah dengan komentar dalam aturan font-face. Memindahkan komentar ke akhir aturan memperbaiki masalah.
Eric D'Souza
Saya menemukan bahwa font yang saya inginkan untuk membuat font web masuk daftar hitam dari Font Squirrel. Namun, transfonter.org berhasil untuk saya.
HotN
Saya juga mengalami masalah dengan Font Squirrel. sukses dengan font-converter.net
Peter Hayman
23

Apakah Anda mencoba format?

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

Baca artikel ini: http://css-tricks.com/snippets/css/using-font-face/

Juga, mungkin bergantung pada browser juga.

pengguna3883419
sumber
14

Anda dapat menggunakan font face seperti ini:

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

Saya tahu ini adalah posting lama tetapi ini menyelesaikan masalah saya.

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

perhatikan bahwa src:url("../fonts/font-name.ttf");kami menggunakan dua periode untuk kembali ke direktori root dan kemudian ke folder font atau di mana pun file Anda berada.

berharap ini membantu seseorang di telepon :) selamat coding

BlakeWebb
sumber