Verlangsamen Schriftarten die Leistung Ihrer Website? Optimieren Sie mit diesem Paket die Ladezeit Ihrer Anwendung für Schriftarten.

Möglicherweise möchten Sie benutzerdefinierte Schriftarten verwenden, um Ihre Next.js-Anwendung optisch ansprechender zu gestalten. Die Verwendung benutzerdefinierter Schriftarten kann das Erscheinungsbild Ihrer Website erheblich verbessern, aber auch die Leistung Ihrer Website verlangsamen, wenn sie nicht richtig optimiert wird. Der @weiter/schrift Paket ist eine Lösung für dieses Problem.

Das @next/font-Paket bietet eine einfache und effiziente Möglichkeit, das Laden von Schriftarten in Next.js zu optimieren und die Ladezeit von Seiten und die Gesamtleistung zu verbessern. Dieser Artikel enthält Informationen zur Verwendung von @next/font in Ihrem Next.js-Projekt.

Installieren des Pakets

Sie können die installieren @weiter/schrift Paket, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm installiere @next/font

Wenn Sie Garn verwenden, können Sie das Paket installieren, indem Sie diesen Befehl ausführen:

instagram viewer 
Garn füge @next/font hinzu

Verwendung von @next/font zur Optimierung von Google Fonts

Der @weiter/schrift -Paket optimiert die Verwendung von Google-Schriftarten. Der @weiter/schrift hostet die Google-Schriftarten automatisch selbst auf dem Next.js-Server, sodass keine Anfrage an Google gesendet wird, um die Schriftarten abzurufen.

Um eine Google-Schriftart in Ihrer Anwendung zu verwenden, importieren Sie die Schriftart als Funktion aus @next/font/google in die _app.js Datei in der Seiten Verzeichnis:

importieren { Roboter } aus'@next/font/google'
konst Roboter = Roboter ({ Teilmengen: ['Latein'] })
ExportStandardFunktionMeine App({ Komponente, pageProps }) {
zurückkehren (

 )
}

Im obigen Codeblock haben Sie eine variable Schriftart mit dem erstellt Roboter Font-Funktion. Der Teilmenge Eigenschaft unterteilt die Schriftart nur auf die lateinischen Zeichen; Wenn Sie eine andere Sprache verwenden, können Sie die Schriftart auf diese Sprache unterteilen.

Sie können bei der Definition der Schriftart auch die Schriftstärke zusammen mit dem Schriftstil angeben:

konst Roboter = Roboter ( 
 {
 Teilmengen: ['Latein'],
 Gewicht: '400',
 Stil: 'kursiv'
 }
)

Sie geben mehrere Schriftstärken und Schriftstile mithilfe von Arrays an.

Zum Beispiel:

konst Roboter = Roboter ( 
 {
 Teilmengen: ['Latein'],
 Gewicht: ['400', '500', '700'],
 Stil: ['kursiv', 'normal']
 }
)

Als Nächstes wickeln Sie Ihre Komponenten in a ein hauptsächlich -Tag und übergeben Sie die Schriftart als Klasse an die hauptsächlich Schild:

importieren { Roboter } aus'@next/font/google'
konst Roboter = Roboter ( 
 {
 Teilmengen: ['Latein'],
 Gewicht: ['400', '500', '600'],
 Stil: ['kursiv', 'normal']
 }
)
ExportStandardFunktionMeine App({ Komponente, pageProps }) {
zurückkehren (


 </main>
 )
}

Durch das Rendern Ihrer Anwendung mit dem obigen Codeblock wird die Schriftart auf Ihre gesamte Anwendung angewendet. Alternativ können Sie die Schriftart auf eine einzelne Seite anwenden. Dazu fügen Sie die Schriftart einer bestimmten Seite hinzu.

So:

importieren { Roboter } aus'@next/font/google'
konst Roboter = Roboter ( 
 {
 Teilmengen: ['Latein'],
 Gewicht: ['400', '500', '600'],
 Stil: ['kursiv', 'normal']
 }
)
ExportStandardFunktionHeim() {
zurückkehren (


Hallo zusammen!!!</p>
 </div>
 )
}

Verwenden von @next/font zum Optimieren lokaler Schriftarten

Der @weiter/schrift -Paket optimiert auch die Verwendung lokaler Schriftarten. Die Technik zur Optimierung lokaler Schriftarten durch die @weiter/schrift -Paket ist der Optimierung von Google-Schriftarten ziemlich ähnlich, mit feinen Unterschieden.

Um lokale Schriftarten zu optimieren, verwenden Sie die localFont Funktion bereitgestellt durch die @weiter/schrift Paket. Sie importieren die localFont Funktion ab @next/font/local und definieren Sie dann vorher Ihre variable Schriftart Verwenden Sie die Schriftart in Ihrer Next.js-Anwendung.

So:

importieren localFont aus'@next/font/local'
konst myFont = localFont({ Quelle: './my-font.woff2' })
ExportStandardFunktionMeine App({ Komponente, pageProps }) {
zurückkehren (


 </main>
 )
}

Sie definieren die variable Schriftart meineSchrift Verwendung der localFont Funktion. Der localFont Funktion nimmt ein Objekt als Argument. Das Objekt hat eine einzige Eigenschaft, Quelle, die auf den Dateipfad der Schriftartdatei in der WOFF2 Format "./meine-schriftart.woff2".

Sie können mehrere Schriftdateien für eine einzelne Schriftfamilie verwenden. Dazu setzt man die Quelle -Eigenschaft in ein Array, das Objekte der verschiedenen Schriftarten und ihre Eigenschaften enthält.

Zum Beispiel:

konst myFont = localFont( 
 {
 Quelle: [
 {
 Weg: './Roboto-Regular.woff2',
 Gewicht: '400',
 Stil: 'normal',
 },
 {
 Weg: './Roboto-Italic.woff2',
 Gewicht: '400',
 Stil: 'kursiv',
 },
 {
 Weg: './Roboto-Bold.woff2',
 Gewicht: '700',
 Stil: 'normal',
 },
 {
 Weg: './Roboto-BoldItalic.woff2',
 Gewicht: '700',
 Stil: 'kursiv',
 },
 ]
 }
)

Verwenden von @next/font mit Tailwind CSS

Um die zu verwenden @weiter/schrift Paket mit Tailwind CSS, Sie müssen CSS-Variablen verwenden. Dazu definieren Sie Ihre Schriftart mit Google oder lokalen Schriftarten und laden dann Ihre Schriftart mit der Variablenoption, um den CSS-Variablennamen anzugeben.

Zum Beispiel:

importieren { Inter } aus'@next/font/google'
konst zwischen = zwischen ({
 Teilmengen: ['Latein'],
 Variable: '--font-inter',
})
ExportStandardFunktionMeine App({ Komponente, pageProps }) {
zurückkehren (
`${inter.variable} font-sans`}>

 </main>
 )
}

Im obigen Codeblock haben Sie die Schriftart erstellt, Inter, und setze die Variable auf --font-inter. Der Klassenname des Hauptelements wird dann auf die Schriftvariable und gesetzt Schriftart-Sans. Der inter.Variable Klasse wendet die an inter Schriftart auf der Seite, und die Schriftart-Sans -Klasse wendet die standardmäßige serifenlose Schriftart an.

Als Nächstes fügen Sie die CSS-Variable zur Tailwind-Konfigurationsdatei hinzu tailwind.config.cjs:

/** @Typ {import('tailwindcss').Config}*/
Modul.exporte = {
 Inhalt: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 Thema: {
 erweitern: {
 Schriftfamilie: {
 ohne: ['var(--font-inter)'],
 },
 },
 },
 Plugins: [],
}

Sie können die Schriftart jetzt in Ihrer Anwendung verwenden, indem Sie die verwenden Schriftart-Sans Klasse.

Schriftoptimierung mit @next/font

Das Paket @next/font ist eine einfache und effektive Möglichkeit, das Laden von Schriftarten in Next.js zu optimieren. Dieses Paket stellt sicher, dass Ihre benutzerdefinierten Schriftarten effizient geladen werden, wodurch die Leistung und Benutzererfahrung Ihrer Website verbessert wird. Dieser Artikel enthält Informationen zum Einrichten des @next/font-Pakets und zum Verwenden in Ihrer Next.js-Anwendung. Sie können die Leistung Ihrer Website weiter verbessern, indem Sie Bilder optimieren.