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.
Boy, have I got a great answer for you! I had the same problem and this worked like a charm.
You have to use the Google API loader. Here's the code I put into my header tag.
<!-- Google API Loader -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//load jQuery
google.load("jquery", "1.7.1");
//Google Fonts
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Lobster+Two:700italic,700,400italic,400', 'Alegreya:400,400italic,700' ]
}
});
});
</script>
Here is some info about the API loader: https://developers.google.com/loader/?hl=ja#intro
And some info about using it with Google Fonts: https://developers.google.com/webfonts/docs/webfont_loader
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');
}
Here is an cwTeXHei version , for support google web fonts on iPhone browser
@font-face {
font-family: 'cwTeXHei';
font-style: normal;
font-weight: normal;
src: local('cwTeXHei'), url('./fonts/cwTeXHei-zhonly.ttf') format('truetype');
}
the url will begin at css folder.
This works on ios 10 safari
thanks Brais Gabin.
来源:https://stackoverflow.com/questions/7332829/embedding-fonts-in-ipad