Làm thế nào để bao gồm một phông chữ .ttf bằng cách sử dụng CSS?

Tôi có vấn đề với mã của mình. Vì tôi muốn bao gồm phông chữ chung cho trang của mình và tôi đã tải xuống tệp .ttf. Và tôi đưa nó vào CSS chính của mình nhưng phông chữ của tôi sẽ không thay đổi.

Đây là mã đơn giản của tôi:

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

Tôi không biết mình đã sai ở đâu. Bạn có thể giúp tôi với điều này? Cảm ơn.

Chỉ cung cấp tệp .ttf cho webfont sẽ không đủ tốt để hỗ trợ nhiều trình duyệt. Sự kết hợp tốt nhất có thể hiện tại là sử dụng sự kết hợp như sau:

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

Mã này giả sử bạn có định dạng .eot, .woff, .ttf và svg cho webfont. Để tự động hóa tất cả quá trình này, bạn có thể sử dụng: Transfonter.org .

Ngoài ra, các trình duyệt hiện đại đang chuyển sang phông chữ .woff, vì vậy bạn cũng có thể làm điều này:

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

Đọc thêm tại đây: http://css-tricks.com/snippets/css/using-font-face/

Tìm kiếm hỗ trợ trình duyệt: Tôi có thể sử dụng fontface không

Bạn đã thử định dạng?

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

Đọc bài viết này: http://css-tricks.com/snippets/css/using-font-face/

Ngoài ra, cũng có thể phụ thuộc vào trình duyệt.

Bạn có thể sử dụng phông chữ như sau:

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

Tôi biết đây là một bài viết cũ nhưng điều này đã giải quyết được vấn đề của tôi.

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

lưu ý rằng src:url("../fonts/font-name.ttf");chúng tôi sử dụng hai dấu chấm để quay lại thư mục gốc và sau đó vào thư mục phông chữ hoặc bất kỳ nơi nào tệp của bạn được đặt.

hy vọng điều này sẽ giúp ai đó xuống dòng :) chúc mừng mã hóa