it-swarm.com.de

Google-Schriftarten werden nicht in Google Chrome gerendert

Ich baue ein neues WordPress-Theme (weiß nicht, ob das relevant ist) und dieses Problem stört mich immer wieder.

Ich habe Roboto Slab von Google Webfonts geladen (CSS in Abschnitt <head> enthalten). In allen anderen Browsern wird die Schriftart mit Ausnahme von Google Chrome korrekt dargestellt. Wenn ich die Website zum ersten Mal in Google Chrome lade, werden Texte, die diese benutzerdefinierte Schriftart verwenden, NICHT angezeigt AT ALL (auch wenn der Fontstapel Georgia als Ausweichcode enthält - "Roboto Slab", Georgia, serif;). Nachdem ich den gestylten Link gezogen oder eine CSS-Eigenschaft im Inspector erneut ausgelöst habe, werden die Texte sichtbar.

Seit ich das Theme vor einiger Zeit gestartet habe, kann ich mich klar daran erinnern, dass es vorher perfekt funktioniert hat. Ist dies ein bekannter Chrome-Update-Fehler? 

Erstes Laden von: ein Screenshot # 1

Nachdem ich eine der CSS-Eigenschaften erneut angewendet habe, komme ich in die responsive Ansicht oder schwebe ein Element: einen Screenshot # 2

Hat jemand ähnliche Probleme? Wie soll ich damit vorgehen?

Vielen Dank!

63
enodekciw

Anscheinend handelt es sich um einen bekannten Chrome-Fehler . Es gibt eine Nur-CSS-Problemumgehung, die das Problem lösen sollte: 

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

Es scheint, als müsste Chrome nur aufgefordert werden, den Text neu zu malen

88
Meg

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

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

8
JohnAndrews

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

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

2
Nate

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

Verwenden Sie die URL-Version von https.

1
Emad Ehsan

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.

1
Conor O Kelly

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.

1

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.

0
RedClover

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. 

0
b1nary

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 .

0
jimuty

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  enter image description here

Bild zu Schritt 2  enter image description here

0
Akshay

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.

0
MarcGuay