font-face not working on all browsers

Question

I tried to use face-font to add a couple of fonts to my page but unfortunately, even if I followed the instructions to make it compatible with browsers, it only works on Chrome and Safari and I can't work out why. I tried two different methods.

The first one looks like this:

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

and the second one like this:

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

Could you please tell me which of the two methods is the best one? Any suggestion to make it work on all browsers?

In case you want to see the example, it is available here:

enter link description here

I hope you can help! Thanks in advance

Cheers

Enrico

Answer 1

I see the answer, you're calling the font-family incorrectly. Make sure to use the @font-face font-family declaration. In this case, use 'robotoblack' instead of 'roboto-black'. And use quotes in your css when calling the fonts.

I also recommend calling @font-face first then call those font-families in the css after.