2012-12-09 25 views
11

Google Webフォントを使用すると、気になるブラウザ(Chrome/iOSを除く)に問題なく読み込まれます。これは、Mac用のChromeとiOS用のSafariでは正常に動作するため、奇妙に思えるので、iOSの問題やGoogle Chromeの問題ではないと思います。 Chrome/iOSに固有のようです。iOS用ChromeにGoogle Webフォントが読み込まれない

どのようなアイデアや、これをトラブルシューティングするためのアイデアは素晴らしいでしょう!

ありがとうございます!

EDIT

私は次のように、GoogleでホストされているGoogleウェブフォントを使用しています:

h1 
    font-family: "Leckerli One", cursive 
:私のフォント(SASS)で

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" /> 

、私は以下を使用しています

+0

どのようにGoogleウェブフォントを使用している - など、遠隔Googleがホスト、または独自のサーバー上の? (これはしばしば違いがあります)どのフォントですか?あなたが使用している正確なコードは何ですか? –

+0

フォントをダウンロードしようとしましたか、自分でそれをホストし、それが表示されているのを見ましたか?あなたは一発の価値があります。 –

+0

Andrew-あなたのサイトへのリンクがありますか?私は現在自分のサイトでGoogle Webフォントを使用していて、iOSのChromeで動作しています。私もそのフォントでテストしたところうまくいきました。http://www.djfarrelly.com/test/ – djfarrelly

答えて

9

私は同じ問題を見ています。自分のサーバー上でフォントファイルをホストし、@ font-faceルールを書き直して、私のローカルのdevサーバーとprodの両方で問題を解決しました。

原因はわかりません。私の最高の推測は、UIWebViews(App StoreのルールのためにiOS ChromeがUIWebViewになっている)で異なって実施されるいくつかの同じ起源の問題であろう。

+0

答えが本当に質問に答えなければならない、あなたが何かを言いたい場合は、コメントでお願いします(あなたが50の評判を持っているなら、これを行うことができます) –

+3

私は問題を解決し、彼の元の質問に答えました。もし私が彼の深い理論のフォローアップに答えなければ、私は恩恵を受けないと期待しています。そして、すべてが世界にあるだけです。 – Dave

2

CSS

!important 

例:

@font-face { 
    font-family: 'Monda' !important; 
    font-style: normal !important; 
    font-weight: 400 !important; 
    src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important; 
} 
+5

あなたの答えが全く意味をなさないものとして精緻化してください。 – Marko

+1

彼は、ここのCSSインスタンスがスタイルシート(CSS:カスケードスタイルシート)にさらに書き込まれていることを示唆しているので、!importantを使ってそれを上書きする必要があります。しかし、私はこれがあなたの問題だとは思わない。 –

4

IOSデバイスは、TTF形式(または、以下のデベロッパーガイドラインに従う場合はOTF)のみを使用します。そのフォントはWOFF、EOT、OTF(ガイドラインに従わないものとする)として提供されています。 servicesがあり、他のバージョンを提供します。 @ font-faceを使ってフォントを指定し、問題が解決するかどうか確認してください! Fontsquirrelには重い作業を行うために@font-face generatorがあります。

フォローアップの質問に関して。 TrueTypeフォントの実装に関するアップルのデベロッパードキュメントがいくつかあります。これはhereです。本質的に、TTF形式はフォントをsfntリソースとして格納します。これを行うことができる唯一の他のフォントフォーマットは、OpenTypeのオフセットテーブルsfntラッパーです。 IOSはsfntラッパーを使用してフォントを読み込むため、この方法で格納されていないフォントの問題が発生します。 (すべてのジャゴニーの話には申し訳ありません)。

+0

私の経験ではありません。少なくとも、iOS6ではWOFFフォントがうまく機能しました(SafariとChromeで、自分のサーバーから提供した後に)。この質問に関する私の答えを見てください。 – Dave

4

ユーザーのブラウザを検出し、適切にフォーマットされたCSSを返信するGoogle Fonts API Loaderを使用できます。

サンプルコードは、this Stack Overflow questionの最初の応答で利用できます。

これにより、SafariとChrome(および他のUIWebViewベースのブラウザ)がフォントを正しく表示できます。

メモ:フォントをローカルに保存する場合は、@Daveが示唆するように、this CSSが機能するはずです。

0

iOS 9以降でChromeに読み込まれていないフォントでも、この問題が引き続き発生する場合は、フォントがCSSファイルではなくjsファイルとして読み込まれることを再確認してください。フォント。comはjsとしてフォントをインポートするオプションを提供しますが、これはChrome/iOS 9またはそれ以降では取得されません。私のインポートを変更すると、これは私のために修正されました。私にとっては

0

作品はPHPのページに追加します。

<style type="text/css"> 
@import url('https://fonts.googleapis.com/css?family=Trocchi'); 
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); 
</style> 
関連する問題