web-dev-qa-db-ja.com

GoogleフォントはGoogle Chromeでレンダリングされません

私は新しいWordPressテーマを作成しています（それが関連するかどうかはわかりません）。

Google WebfontsからRoboto Slabをロードしました（<head>セクションにCSSが含まれています）。他のすべてのブラウザでは、Google Chromeを除き、フォントは正常にレンダリングされます。 Google Chromeで最初にWebサイトをロードしたとき、そのカスタムフォントを使用するテキストはAT ALL表示されません（フォントスタックでもフォールバックとしてジョージアがあります-"Roboto Slab", Georgia, serif;）。スタイル設定されたリンクにカーソルを合わせるか、InspectorでCSSプロパティを再トリガーすると、テキストが表示されます。

しばらく前にテーマを始めたので、以前は完全に機能していたことをはっきりと覚えています。これは最近の既知のChrome更新バグですか？

最初のロード： スクリーンショット＃1

CSSプロパティのいずれかを再適用した後、レスポンシブビューに入るか、要素にカーソルを合わせます： a screenshot＃2

誰もが同様の問題を抱えていますか？これをどのように進める必要がありますか？

ありがとう！

htmlcssgoogle-chromegoogle-webfonts
63
enodekciw

どうやら 既知Chromeバグ です。問題を解決するCSSのみの回避策があります。

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Chromeにテキストを塗り直すように指示するだけでよいようです

88
Meg

CSSの修正は私にとってはうまくいきませんでしたし、0.5秒の遅延スクリプトも厄介なようです。

このJSスニペットは私たちにとってうまくいくようです：

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>
9
kjetilh

Css修正がうまくいかない場合

最初の格付けされた投稿 が機能しない場合、解決策は次のとおりです。

「http：」を削除::

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

または

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

David Bain で説明されているように、最新のブラウザのほとんどは、実際にプロトコルを指定する必要はなく、呼び出し元のコンテキストに基づいてプロトコルを「推測」します。

8
JohnAndrews

上記のCSS修正を単独で試してみましたが、成功しませんでした。最後に、次を含むスタイルシート（chrome.css）を作成して解決しました。

body {
 -webkit-animation-delay: 0.1s;
 -webkit-animation-name: fontfix;
 -webkit-animation-duration: 0.1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: linear;
}

@@-webkit-keyframes fontfix {
 from { opacity: 1; }
 to   { opacity: 1; }
}

そして、ページの下部にあるjqueryでロードします：

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="/chrome.css" rel="stylesheet" />');
   });
</script>
6
Andrew

上記のCSSを組み込みました...しかし、ヘッダーに次のjavascriptも含めています：

（注、私は以下のコードでフォントをカスタマイズしていないことを知っています。しかし、とにかく、Chromeにページ上のフォントを強制的に塗り直すのに役立つようです...あなたのフォントが他の場所で適切に参照されている）

上記のCSSを以下のコードと組み合わせて使用​​すると、最悪の場合、ページ上のすべてのフォントが1秒ほど遅れて表示されます。

これが人々の役に立つことを願っています。乾杯。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

ここで私が上記を見つけました： https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

2
Nate

私はちょうど同じ問題に直面しました。説明したとおり、HTTP/Sプロトコルの不一致が原因でした here 。

httpsバージョンのURLを使用します。

1
eMad

JSソリューションで修正しましたが、最新のGoogleホストjquery（1.11）を使用して修正する必要もありました。

1
Conor O Kelly

問題の同様の問題を参照してください Googleフォントのレンダリング中の奇妙な問題 。

解決策は、Google CDNではなくMozilla CDNから目的のフォント（私の場合は「Fira Sans」）をロードすることです。

1
Sebastiaan Ordelman

まだこの問題（2019年）に苦労している人は、Google Fonts CSSジェネレータースクリプトにバグがあるようです。

次のタグでフォントをロードしました：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">

ファイル内のすべての@font-faceには、次のような行が含まれています。

src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');

ご覧のとおり、local('sans-serif')はリモートURLの前に配置されていますが、これは間違っています。これにより、Chromeが要求されたフォントではなくデフォルトのsans-serifフォントをロードします。

簡単な修正方法は、URLのfont-weight部分をRoboto:400,300からRoboto:300,400に並べ替えることです。これにより、ジェネレータにlocal('sans-serif')ソースが含まれなくなります。

それが誰かを助けることを願っています。

0
RedClover

これは実際の解決策ではありませんが、このスレッドの他のすべてのものよりもうまく機能します。フォントを変更しました。 Fira Sansでしたが、すぐにRobotoに変更されました。

0
b1nary

私はWindowsフォントからrobotoフォントを削除するために使用していましたが、今はすべてが機能しています。

お使いのシステムに古いバージョンのフォントがあるためです。私は推測する 。

0
jimuty

私はメグの答えで仕事をしようとしていましたが、他の多くの人と同じように、私にとってもうまくいきませんでした。

Google Fontを使用する場合は、このトリック[ステップのスクリーンショットを追加する]を見つけてください。

1）強調表示されているCSSまたは標準リンクからURLを取得します。

2）別のタブでリンクを開き、cssファイル内のcssコード全体（つまり、font-face）をコピーして実行します。

多くのhttp呼び出しが追加されているため、パフォーマンスについてはわかりません。または、1つのフォントフェースをコピーしてみてください。

ステップ1の画像 enter image description here

ステップ2の画像 enter image description here

0
Akshay

要素にtext-rendering: optimizeLegibilityが設定されている可能性があり、これがこの問題または類似の問題を引き起こす可能性があります。 autoに変更すると、デフォルトでoptimizeLegibilityに設定されるFoundation 5プロジェクトでこの問題が修正されました。

0
MarcGuay