Laden Sie Google-Schriftarten dynamisch, nachdem die Seite geladen wurde

Lesezeit: 2 Minuten

Alexis

Ich möchte, dass der Benutzer auswählen kann, in welcher Schriftart die Seite angezeigt werden soll. Hier ist die von Google empfohlene Vorgehensweise mit JavaScript.

WebFontConfig = {
    google: {
        families: ['Tangerine', 'Cantarell']
    }
};

(function() {
        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);
      })();

Wie kann ich dies ändern, damit ich Schriftarten nach dem Laden der Seite erneut abrufen kann?

Sehen Sie sich den Befehl WebFont.load in diesem Github-Repo an:

https://github.com/typekit/webfontloader

Sie können jede gewünschte Schriftart dynamisch laden:

 <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
  <script> 
        WebFont.load({
                    google: { 
                           families: ['Droid Sans', 'Droid Serif'] 
                     } 
         }); 
   </script>

Stellen Sie sicher, dass Sie in der Produktion eine bestimmte Version verwenden. Sonst findet kein Caching statt.

– sanmai

31. Oktober 2014 um 9:24 Uhr
@sanmai: das ist nicht wahr … es gibt Caching auf der neuesten Version für bis zu 1 Jahr. Ich denke, das Problem ist eher, dass eine fehlerhafte Veröffentlichung Ihre Website beschädigen wird.

– TT.

13. Oktober 2016 um 11:09 Uhr
@DD. hab gerade nachgeschaut ob du recht hast; derzeit für die Version 1 wie oben im Beitrag Google gibt Expires Header für ein Jahr im Voraus; vorher war das nicht der fall

– sanmai

14. Oktober 2016 um 5:30 Uhr

Pierre Arnissolle

Oder wenn Sie keine Bibliotheken von Drittanbietern möchten:

function addStylesheetURL(url) {
  var link = document.createElement('link');
  link.rel="stylesheet";
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
}

// Load Tangerine & Cantarell
addStylesheetURL('https://fonts.googleapis.com/css2?family=Cantarell&family=Tangerine&display=swap');

    h1 {
      font-family: 'Cantarell', sans-serif;
    }
    p {
      font-family: 'Tangerine', cursive;
      font-size: 30px;
    }

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamically load google fonts after page has loaded</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
  </head>
  <body>
    <h1>Dynamically load google fonts after page has loaded</h1>
    <p>Some text.</p>
  </body>
</html>

// Load font:

  const fontName="Roboto";
  const link = document.createElement('link');
  link.rel="stylesheet";
  link.href = `https://fonts.googleapis.com/css?family=${fontName}`;
  document.head.appendChild(link);

// Set font on body element with Javascript:

  document.body.style.fontFamily = fontName;

11521500cookie-checkLaden Sie Google-Schriftarten dynamisch, nachdem die Seite geladen wurde

#Abfrage #CSS #google-font-api #Javascript #Schriftart