CSS @ font-face: Wie man es richtig benutzt?

Question

Ich habe eine neue Schriftart heruntergeladen und speichert in ${RootFolder}/font.
In styles.css Datei schrieb ich:

@font-face { 
    font-family: roboto; 
    url('../fonts/Roboto-Italic.ttf'); 
} 
h1 { 
    font-family: roboto; 
} 

In html Ich schrieb:

<h1> hello </h1> 

Und ich sehe noch nicht, dass Schriftart geändert hat.

Weißt du, was ich falsch gemacht habe?

Answer 1

Probieren Sie es wie folgt aus:

@font-face { 
    font-family: "roboto"; 
    src: url('fonts/Roboto-Italic.ttf'); 
} 
h1 { 
    font-family: roboto; 
} 

Answer 2

in Ihrer Schriftart Gesicht hinzufügen src: url ('../ Fonts/Roboto-Italic.ttf'); anstelle von URL ('../ fonts/Roboto-Italic.ttf');

https://www.w3schools.com/CSSref/css3_pr_font-face_rule.asp

Answer 3

Mit google Schriftarten https://fonts.google.com/specimen/Roboto
einfach importieren diese in die CSS. Ersetzen Sie die @ font-face mit:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); 

Und verwenden wie font-family: roboto;