CSS @ font-face: как правильно использовать его?

Question

Скачан новый шрифт и зарегистрирован в ${RootFolder}/font.
В styles.css файл я писал:

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

В HTML я писал:

<h1> hello </h1> 

И все-таки я не вижу, что шрифт изменился.

Знаете ли вы, что я сделал не так?

Answer 1

Попробуйте использовать его как это:

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

Answer 2

в вашем шрифте добавить src: url ('../ fonts/Roboto-Italic.ttf'); вместо url ('../ fonts/Roboto-Italic.ttf');

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

Answer 3

Использование Google шрифты https://fonts.google.com/specimen/Roboto
Просто импортировать это в CSS. Заменить @ шрифта лицо:

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

И использовать как font-family: roboto;