@Font-face not working on mobile

Question

Here's my code it works perfectly fine on desktop and tablet but not on mobile. Is it the code or do some fonts just not work on mobile

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

Answer 1

You need to add all src needed to @font-face like 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/
Hope it helps, cheers.

(If you need to convert the font you gonna need this font-generator )

Answer 2

You haven't included (assuming you have them) 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 */
}

So *.ttf is missing for Safari/IOS etc.