Google-Schriftarten werden nicht in Google Chrome gerendert

Der CSS-Fix funktionierte nicht für mich, auch das 0,5-Sekunden-Verzögerungsskript scheint unangenehm.

Dieses JS-Snippet scheint für uns zu funktionieren:

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

Wenn der CSS-Fix für Sie nicht funktioniert

Falls der erste bewertete Beitrag nicht funktioniert, ist hier eine Lösung:

entferne das 'http:' in:

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

oder

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

Wie in David Bain erläutert, ist es bei den meisten modernen Browsern nicht erforderlich, dass Sie das Protokoll angeben. Sie "leiten" das Protokoll basierend auf dem Kontext ab, aus dem Sie es aufgerufen haben

Versuchte den CSS-Fix alleine ohne Erfolg. Schließlich gelöst durch Erstellen eines Stylesheets (chrome.css), das Folgendes enthält:

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

Und lade es mit jquery am Ende der Seite:

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

Ich habe das obige CSS eingebaut ... aber ich füge auch folgendes Javascript in meine Kopfzeile ein:

(Beachten Sie, ich weiß, dass ich die Schriftarten im folgenden Code nicht angepasst habe. Trotzdem scheint es immer noch hilfreich zu sein, Chrome dazu zu zwingen, die Schriftarten auf der Seite neu zu malen.

Wenn der oben erwähnte CSS-Code in Verbindung mit dem folgenden Code in my ... verwendet wird, werden im schlimmsten Fall alle Zeichensätze auf meiner Seite nach etwa einer zweiten Verzögerung angezeigt.

Hoffe das hilft den Leuten. Prost.

<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>

Hier habe ich das oben gefunden: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

Ich stand gerade vor demselben Problem. Ich war aufgrund von HTTP/S-Protokollkonflikten wie beschrieben in hier . 

Verwenden Sie die URL-Version von https.

Ich habe das Problem mit der JS-Lösung behoben, musste aber auch die neueste von Google gehostete Jquery (1.11) verwenden, um das Problem zu beheben.

Siehe ähnliches Problem in Frage Seltsames Problem beim Google Font Rendering .

Die Lösung besteht darin, die gewünschte Schriftart (ich meine Fall 'Fira Sans') von Mozilla CDN anstelle von Google CDN zu laden.

Wenn noch jemand mit diesem Problem zu kämpfen hat (2019), scheint es einen Fehler im CSS-Generatorskript von Google Fonts zu geben.

Ich habe meine Schriften mit dem folgenden Tag geladen:

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

Jeder @font-face in der Datei enthielt eine Zeile wie diese:

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

Wie Sie sehen, wird die local('sans-serif') vor die ferne URL gestellt, was falsch ist. Dies führt dazu, dass Chrome die Standardschrift ohne Serifen anstelle der angeforderten lädt.

Eine einfache Lösung besteht darin, den font-weight-Teil der URL von Roboto:400,300 in Roboto:300,400 neu zu ordnen. Dies führt dazu, dass der Generator die Quelle local('sans-serif') nicht enthält.

Hoffe es hilft jemandem.

Es ist keine wirkliche Lösung, aber es funktioniert für mich besser als alles andere in diesem Thread. Ich habe die Schriftart geändert. Ich hatte Fira Sans und habe gerade zu Roboto gewechselt, was aus der Box funktioniert. 

ich habe gerade verwendet, um Roboto-Schrift aus meinen Windows-Schriftarten zu löschen und alles funktioniert jetzt.

möglicherweise liegt eine ältere Version der Schriftart auf Ihrem System vor. ich vermute .

Ich habe versucht, mit Megs Antwort zu arbeiten, aber wie viele andere hat es auch bei mir nicht funktioniert.

Um Google Font zu verwenden, haben Sie diesen Trick gefunden [Screenshots für Schritte hinzufügen].

1) Nehmen Sie einfach die URL aus dem CSS- oder Standard-Link, wie markiert.

2) Öffnen Sie den Link in einem anderen Tab, kopieren Sie den gesamten CSS-Code (d. H. Font-face) in Ihre CSS-Datei und führen Sie ihn aus.

Sie sind sich nicht sicher, was die Leistung angeht, da viele http-Aufrufe hinzugefügt werden, oder versuchen Sie einfach, eine Schriftart zu kopieren.

Bild zu Schritt 1  

Bild zu Schritt 2  

Es ist möglich, dass für das Element text-rendering: optimizeLegibility festgelegt wurde, was zu ähnlichen Problemen führen kann. Das Ändern in auto beseitigte dieses Problem für mich mit einem Foundation 5-Projekt, in dem es standardmäßig auf optimizeLegibility festgelegt ist.