font-face не работает во всех браузерах

Question

Я попытался использовать face-font, чтобы добавить пару своих шрифтов на мою страницу, но, к сожалению, даже если я выполнил инструкции, чтобы сделать его совместимым с браузерами, он работает только на Chrome и Safari и я не могу понять, почему. Я пробовал два разных метода.

Первый выглядит следующим образом:

@font-face { 
    font-family: 'robotoblack'; 
    src: url('roboto-black-webfont.eot'); /* per IE 5-8 */ 
    src: local('☺'), /* direttiva local per IE */ 
    url('roboto-black-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */ 
     url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */ 
} 

@font-face { 
    font-family: 'robotomedium_italic'; 
    src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */ 
    src: local('☺'), /* direttiva local per IE */ 
    url('roboto-mediumitalic-webfont.woff') format('woff'), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */ 
     url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */ 
} 

, а второй, как это:

@font-face { 
    font-family: 'robotoblack'; 
    src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('roboto-black-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'robotomedium_italic'; 
    src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('roboto-mediumitalic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */ 
} 

Не могли бы вы мне сказать, какой из двух методов является лучшим выбором? Любое предложение заставить его работать во всех браузерах?

В случае, если вы хотите увидеть пример, он доступен здесь:

enter link description here

Я надеюсь, что вы можете помочь! Заранее спасибо

Приветствия

Энрико

Answer 1

Я вижу ответ, вы звоните в семейство шрифтов неправильно. Обязательно используйте объявление шрифта-шрифта @ font-face. В этом случае используйте «robotoblack» вместо «roboto-black». И используйте кавычки в своем CSS при вызове шрифтов.

Я также рекомендую сначала вызвать @ font-face, а затем вызвать эти семейства шрифтов в css после.