Comment inclure une police .ttf en utilisant CSS?

120

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.

html css Jérielle
la source

1

Pouvez-vous vérifier l'onglet Réseau dans la console de votre navigateur pour vous assurer que la police est chargée correctement?

rink.attendant.6

Get woff from here

Mr. Alien

1

Êtes-vous sûr d'avoir correctement orthographié le nom du fichier de police? Ne devrait-il pas l'être oswald.regular.ttf?

1

Oui j'ai vérifié le nom de ma police

Jerielle

5

@Jerielle Vous avez donc une police TTF avec une extension de tff? En êtes-vous vraiment sûr?

174

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

Abhinav Gauniyal
la source

et si vous utilisez GFonts, consultez stackoverflow.com/a/30585464/1727470

Samy Bencherif

1

Pour ceux comme moi qui se confondent facilement - les chemins sont avec des barres obliquesurl('path/to/font.woff')

wunth

J'ai eu un problème avec les commentaires dans la règle font-face. Le déplacement des commentaires à la fin de la règle a résolu le problème.

Eric D'Souza

J'ai trouvé que la police pour laquelle je voulais générer une police Web était sur la liste noire de Font Squirrel. Cependant, transfonter.org a fonctionné pour moi.

HotN le

J'ai également eu des problèmes avec Font Squirrel. success with font-converter.net

Peter Hayman

23

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.

user3883419
la source

14

Vous pouvez utiliser le visage de police comme ceci:

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

INTODAN
la source

3

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");
}

Développer l'extrait

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

BlakeWebb
la source

Comment inclure une police .ttf en utilisant CSS?

Réponses: