Search code examples
cssipaduiwebviewembedded-fonts

Embedding fonts in iPad

I am trying to embed Google fonts in a WebView in iPad.

If I put this in the head all works fine:

<link href='http://fonts.googleapis.com/css?family=Monofett' rel='stylesheet' type='text/css'>

The html is local then I need to copy the CSS and the fonts in my iPad.

When I do this changes the fonts doesn't work:

html:

<link href='fonts/fonts.css' rel='stylesheet' type='text/css'>

fonts/fonst.css:

@font-face {
  font-family: 'Monofett';
  font-style: normal;
  font-weight: normal;
  src: local('Monofett'), url('http://themes.googleusercontent.com/static/fonts/monofett/v1/94n9d8-lEEaOz-Sn4plHGPesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

I know I'm still doing remote connections but why doesn't work this?

The web looks fine in Safari and Firefox.

Solution

  • The problem is the woff format. Google know that and he return you a different css when you use Safari in PC or in iPad. The correct CSS is:

    @font-face {
 font-family: 'Monofett';
 font-style: normal;
 font-weight: normal;
 src: local('Monofett'), url('./BezoWS-9nng_g31KmAteQ3YhjbSpvc47ee6xR_80Hnw.ttf') format('truetype');
}