CODEWITHSUNDEEP
htmlcssfont-face
Reece
Reece

Reputation: 2711

@Font-face not working on mobile

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');
}

Upvotes: 15

Views: 35894

Answers (2)

Roy Bogado
Roy Bogado

Reputation: 4452

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 )

Upvotes: 23

Dan
Dan

Reputation: 1244

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.

Upvotes: 1

Related Questions