Wie füge ich eine Schriftart .ttf mit CSS hinzu?

119

Ich habe ein Problem mit meinem Code. Weil ich eine globale Schriftart für meine Seite einfügen möchte und eine .ttf-Datei heruntergeladen habe. Und ich füge es in mein Haupt-CSS ein, aber meine Schriftart ändert sich nicht.

Hier ist mein einfacher Code:

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

Ich weiß nicht, wo ich falsch gelaufen bin. Kannst du mir dabei helfen? Vielen Dank.

html css Jerielle
quelle

1

Können Sie die Registerkarte Netzwerk in der Konsole Ihres Browsers überprüfen, um sicherzustellen, dass die Schriftart ordnungsgemäß geladen ist?

rink.attendant.6

Holen Sie sich woff von hier

Mr. Alien

1

Sind Sie sicher, dass Sie den Namen der Schriftartdatei richtig geschrieben haben? Sollte es nicht sein oswald.regular.ttf?

1

Ja, ich habe den Namen meiner Schrift doppelt überprüft

Jerielle

5

@Jerielle Du hast also eine TTF-Schriftart mit einer Erweiterung von tff? Bist du dir da wirklich sicher?

173

Nur die Bereitstellung einer .ttf-Datei für Webfont ist für die browserübergreifende Unterstützung nicht ausreichend. Die derzeit bestmögliche Kombination ist die Verwendung der Kombination als:

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

Dieser Code setzt voraus, dass Sie das Format .eot, .woff, .ttf und svg für Ihren Webfont haben. Um all diesen Prozess zu automatisieren, können Sie Folgendes verwenden: Transfonter.org .

Außerdem verschieben sich moderne Browser in Richtung .woff-Schriftart, sodass Sie dies wahrscheinlich auch tun können ::

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

Lesen Sie hier mehr: http://css-tricks.com/snippets/css/using-font-face/

Suchen Sie nach Browserunterstützung: Kann ich Schriftarten verwenden?

Abhinav Gauniyal
quelle

und wenn Sie GFonts verwenden, überprüfen Sie stackoverflow.com/a/30585464/1727470

Samy Bencherif

1

Für diejenigen wie mich, die leicht verwirrt werden - Wege sind mit Schrägstrichenurl('path/to/font.woff')

Uhr

Ich hatte ein Problem mit Kommentaren in der Schriftartenregel. Durch Verschieben der Kommentare an das Ende der Regel wurde das Problem behoben.

Eric D'Souza

Ich habe festgestellt, dass die Schriftart, für die ich eine Webschrift erstellen wollte, von Font Squirrel auf die schwarze Liste gesetzt wurde. Allerdings transfonter.org für mich gearbeitet.

HotN

Ich hatte auch Probleme mit Font Squirrel. Erfolg mit font-converter.net

Peter Hayman

23

Haben Sie versucht, zu formatieren?

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

Lesen Sie diesen Artikel: http://css-tricks.com/snippets/css/using-font-face/

Kann auch vom Browser abhängen.

user3883419
quelle

14

Sie können Schriftarten wie folgt verwenden:

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

INTODAN
quelle

3

Ich weiß, dass dies ein alter Beitrag ist, aber dies hat mein Problem gelöst.

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

Erweitern Sie das Snippet

Beachten Sie, dass src:url("../fonts/font-name.ttf");wir zwei Punkte verwenden, um zum Stammverzeichnis und dann in den Schriftartenordner oder an den Ort zurückzukehren, an dem sich Ihre Datei befindet.

Ich hoffe, das hilft jemandem auf der ganzen Linie :) Viel Spaß beim Codieren

BlakeWebb
quelle

Wie füge ich eine Schriftart .ttf mit CSS hinzu?

Antworten: