Comment inclure une police .ttf en utilisant CSS?

J'ai un problème avec mon code. Parce que je souhaite inclure une police globale pour ma page et que j'ai téléchargé un fichier .ttf. Et je l'inclus dans mon CSS principal mais ma police ne changera pas.

Voici mon code simple:

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

Je ne sais pas où je me suis trompé. Peux-tu m'aider avec ceci? Merci.

Fournir uniquement un fichier .ttf pour la police Web ne sera pas suffisant pour la prise en charge de plusieurs navigateurs. La meilleure combinaison possible actuellement utilise la combinaison comme:

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

Ce code suppose que vous avez le format .eot, .woff, .ttf et svg pour votre police Web. Pour automatiser tout ce processus, vous pouvez utiliser: Transfonter.org .

De plus, les navigateurs modernes se tournent vers la police .woff, vous pouvez donc probablement le faire aussi::

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

En savoir plus ici: http://css-tricks.com/snippets/css/using-font-face/

Recherchez la prise en charge du navigateur: Puis-je utiliser fontface

Avez-vous essayé le format?

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

Lisez cet article: http://css-tricks.com/snippets/css/using-font-face/

Cela peut également dépendre du navigateur.

Vous pouvez utiliser le visage de police comme ceci:

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

Je sais que c'est un ancien message, mais cela a résolu mon problème.

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

notez que src:url("../fonts/font-name.ttf");nous utilisons deux points pour revenir au répertoire racine, puis dans le dossier des polices ou à l'endroit où se trouve votre fichier.

j'espère que cela aidera quelqu'un sur toute la ligne :) codage heureux