@ Font-face does not work on mobile devices

Question

Here, my code works fine on the desktop and tablet, but not on the mobile phone. Is this code or some fonts just not working on mobile devices?

@font-face {
    font-family: 'Out';
    src: url('http://location/Outstanding.otf');
}

Answer 1

You need to add everything srcnecessary for @font-face, as in this example:

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

Source : https://css-tricks.com/snippets/css/using-font-face/
I hope this helps, it amuses.

(If you need to convert a font, you will need this font generator )

Answer 2

You have not included (provided that you have) all the necessary font files:

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

, Safari/IOS .. *.ttf.