Optimierung von Schriftarten

82 % der Webseiten für Desktop verwenden Webfonts. Benutzerdefinierte Schriftarten sind wichtig für das Branding, Design und die konsistente Darstellung Ihrer Website über verschiedene Browser und Geräte hinweg. Die Verwendung von Webfonts sollte jedoch nicht auf Kosten der Performance gehen.

Next.js bietet eine integrierte Automatische Webfont-Optimierung, die CSS für Schriftarten zur Build-Zeit einbettet und damit zusätzliche Abfragen für Schriftart-Deklarationen überflüssig macht. Dies führt zu Verbesserungen bei First Contentful Paint (FCP) und Largest Contentful Paint (LCP).

Hier ein Beispiel für die Optimierung von Schriftarten durch Next.js:

Vor der Optimierung ist eine zusätzliche Netzwerkanfrage erforderlich:

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

Nach der Optimierung bettet Next.js das CSS für die Schriftart automatisch ein:

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal; }
</style>