nextjs tailwind googlefonts selfhost starter
1.0.0
Typografie kann Ihre Anwendungen zu Zing machen !!!
Durch das Hinzufügen von Google -Schriftarten können Sie benutzerdefinierte Schriftarten in Ihren Apps verwenden. Sie werden als kostenlos beworben und es stehen über 900+ Schriftfamilien zur Auswahl. Seit 2018 empfohlen Google Selbsthosting, um seine Schriftarten hinzuzufügen.
Es gibt eine Reihe von Web -Safe -Schriftarten, die kostenlos und in verschiedene Plattformen integriert sind. Manchmal brauchen wir jedoch etwas, das anpassender ist, um unsere Designzwecke zu erfüllen.
Also "ohne viel weiter-a-do" ...
Dieses repo richtet sich ausdrücklich auf die Selbsthostierung von Google-Schriftarten, anstatt einen Link zu ihrem CDN zu verwenden, und wie man sie in eine Next.js-App integriert, die Rückenwind-CSS verwendet.
Es gibt eine Reihe von Vor- und Nachteilen für Selbsthosting, die in vielen Artikeln und Blogs diskutiert wurden. Ich werde diese hier nicht detaillieren. Ich habe am Ende dieser Readme -Datei ein paar Links zur Verfügung gestellt, um weiter zu lesen.
Google -Schriftarten werden als Open Source und kostenlos ...
Aber nimm mein Wort nicht dafür (ich bin kein Laien und das ist kein Rechtsberatung)
Alle in diesem Beispiel verwendeten Schriftarten stammen von Google -Schriftarten unter der SIL Open Font Lizenz (OFL) v1.1. Ich habe darauf geachtet, die Lizenzen in die Selbsthost-Ordner in das Repo einzubeziehen, die in der OFL angefordert werden.
Hinweis: Sie sollten die Schriftartinformationen der Schriftart immer selbst lesen, da Sie dafür verantwortlich sind. Zu diesem Zeitpunkt verwenden Google -Schriftarten OFL v1.1, einige verwenden die Apache 2 -Lizenz. Die Ubuntu -Schriftarten verwenden die Ubuntu -Schriftlizenz v1.0
Sie sollten sich vor dem Selbstveranstalter oder benutzerdefinierten Schriftarten Rechtsbilanz einholen.
Siehe den Code, der hier demonstriert ist
Sie können Google -Schriftarten auf verschiedene Arten erhalten (dies ist keine erschöpfungsfähige Liste) unter Verwendung der folgenden Tools:
Schriftarten können auch auf Googles Github Repo gefunden werden.
Einmal haben Sie sie heruntergeladen, Sie können sie Ihrem Projekt zum SelbstHost hinzufügen.
Der einfachste Weg, sie zu hosten, ist unter einem public Ordner in einem Subordner namens fonts .
Ich habe die Schriftressourcenorte wie folgt strukturiert, Sie müssen dies nicht befolgen, sie zeigt Flexibilität und dass alle Schriftarten organisiert werden können, anstatt nur unter den Subordner
fontszu platzieren.
├── public
| └── fonts
| └── google
│ ├── font(s) by name
│ │ │ ├── .woff / .ttf (etc)
│ │ │ ├── .css
│ │ │ ├── licence.txt
├── styles
| └── global.css (app-base.css)
├── .gitignore
├── jsconfig.json
├── postcss.config.js
├── tailwind.config.js
Die Schriftarten werden von diesem Standort zu unserer nächsten.js -App serverd sein.
Sobald wir die Schriftdateien, Lizenzen, Stylesheets usw. heruntergeladen und die Ordner strukturiert haben, müssen wir das Laden der Schriftart durchführen.
Wir können @font-face verwenden, um die Schriftarten zu laden. Siehe die CSS -Dateien, die neben den Schriftressourcen im oben genannten font angezeigt werden.
Wir können diese schließlich in die CSS -Datei mit den Rückenwindstilen importieren. Normalerweise heißt dies global.css , ich verwende 3 Dateien, die in die nächste.js _app.js -Datei importiert werden.
Zum Beispiel:
@font-face {
font-family : 'Oswald Variable' ; /*Ive added a prefix to let me know its a variable font*/
font-style : normal;
font-weight : 200 700 ;
src : local ( 'Oswald' ) ,
url (/fonts/google/oswald/Oswald-VariableFont_wght.ttf) format ( 'truetype' );
font-display : swap;
} Als nächstes führen wir einige kleine Optimierungen für das Laden der Schriftart (en) unter Verwendung des font-display Attributs durch.
Durch die Verwendung @font-face in Kombination mit Schriftarten font-display können wir Fout und Foit verhindern.
Es gibt eine Reihe von Strategien, um dies umzusetzen:
| Strategie | Beschreibung |
|---|---|
1. block | Rendern Sie dem Benutzer nichts, bis die Schriftarten geladen wurden. |
2. swap | Empfohlen für Google -Schriftarten. Es wird ausgetauscht, sobald die Schriftart geladen wird. |
3. fallback | nicht empfohlen. Es zeigt für kurze Zeit immer noch unsichtbarer Text wie Block, wird aber schließlich in eine sichere Schriftart fallen. |
4. optional | Eine gute Wahl, wenn Schriftart nicht wichtig ist, sondern auf Marken und Inhalt konzentrieren. Ist wie langsam verbundener Fallback, der möglicherweise nicht einmal eine Schriftart lädt. |
Dies ist eine neue Regel, die Sie zu Ihrer Schriftart-Erklärung hinzufügen können, die dem Browser mitteilt, dass sie die von Ihnen aufgelisteten Fallback-Systeme verwenden sollen (z. B. sans serif), und dann die gewünschte Schriftart beim Herunterladen auszutauschen.
Es ist eine gute Leistungsverbesserung, da es Inhalte anzeigt, ohne auf Downloads zu warten.
font-display: swap; Hat den Nachteil, diesen nicht geklärten Text zu blinken, wenn die Schriftart noch nicht geladen hat. Aber wir können das mit Vorspannung beheben.
Wir können unsere Schriftarten in der <head> unserer Seiten -App aufladen. Dies ist besonders nützlich für diese kritischen Typografiestücken, die wir ohne Blinken anzeigen möchten.
Toto tho, wir können dem Kopf unserer Seite < <preload> > hinzufügen.
In Next.js fügen wir es in das benutzerdefinierte _document.js wie folgt hinzu:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > HINWEIS: Seien Sie vorsichtig, wenn Sie vorladen, da sie sich negativ auswirken kann, wenn sie überbeanspruchte. Also benutzen wir es mit Bedacht. Es ist eine Möglichkeit, die Bedeutung einer Ressource festzulegen. Wir können auch für unsere script das Gleiche tun, wenn dies erforderlich ist.
Als nächstes erstellen wir eine Fonts.css -Datei im Ordner publicfonts . Hier importieren wir die verschiedenen CCS-Dateien für die Google-Schriftressourcen, die oben mit @font-face geladen wurden, dh dh dh
@import './google/oswald/Oswald-Variable.css' ;Dies wird dann in die folgende Datei im Stabschindstil importiert.
Als nächstes fügen wir der app-base.css Datei unter dem Ordner ./styles Folgendes hinzu.
Wir verwenden die @layer -Direktive, um Tailwind zu sagen, welcher "Bucket" auch die Schriftstile hinzufügen.
Gültige Schichtanweisungen sind eine Basis, Komponenten und Dienstprogramme.
Zum Beispiel:
@layer base {
@import "../public/fonts/fonts.css";
}
Wir importieren dann die Stile in die Datei _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Schließlich richten wir die Datei tailwind.config.js ein, um die Schriftfamilien zu unserer App hinzuzufügen. Wir fügen sie entweder den Basis -Schriftsthemen hinzu oder erweitern die Themen (oder beides).
Zum Beispiel:
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
fontFamily: {
sans: ['Oswald Variable, Arial', fontFamily.serif],
serif: ['Merriweather Sans, Georgia', fontFamily.serif],
},
extend: {
fontFamily: {
'Grandstander-VariableFont': ['Grandstander Variable'],
},
},
},
;
Das war's. Wir sind fertig, siehe den Code für weitere Details.
Danke fürs Lesen. ? ?
Bitte spiele mich, wenn du das nützlich fand.
Hier folgt weitere Informationen für diejenigen, die es möglicherweise nützlich finden. ?
Denken Sie daran, dass Sie Lighthouse verwenden können, um die Leistung Ihrer Seite zu testen. Dies wird auch nach Optimien von Schriftarten und Skripten suchen und Empfehlungen, einschließlich Fout- und Foit -Probleme, einbezogen.
Einmal gebaut, freue ich mich zu sagen, dass diese Demo beim lokalen Laufen Folgendes bekommt.
Die Hauptgründe, warum ich mich entscheide, um selbst zu hosten, sind wie folgt:
| 1. Google empfiehlt es | Es wird jetzt von Google selbst empfohlen. Seit 2018 hat Google Self Hosting für optimale Peformance durch Vorladung empfohlen. Das Selbsthosting ist kostenlos und wird ermutigt. Sehen Sie sich dieses Video an: Google Chrome Developers: Web Performance MAY MAD. |
| 2. besser für die Privatsphäre | CDNs von Drittanbietern können Cookies und Tracking -Algorithmen verwenden, von denen Sie nicht merkwürdig wissen. Dies kann ein Problem in Ländern sein, in denen Sie die Einwilligung der Benutzer benötigen (dh Datenschutz und GDPR, siehe: GDPR-Einhaltung von Google-Schriftarten. |
| 3. besser für die Sicherheit | mehr Kontrolle auf Ihrem eigenen Server). Sie rufen tatsächlich mindestens 2 Domänen auf, wenn Sie das CDN verwenden. |
| 4. Schneller und peformenterer | Google -Schriftarten fügen Ressourcen hinzu, die Sie möglicherweise nicht benötigen. Sie können Schriftstile usw. auswählen und Ihre eigenen CSS-Regeln/-dateien im Zusammenhang mit der Schrift mit einer Schriftart minifieren und weniger HTTP-Anfragen geben. Sie können dies tun, indem Sie die spezifischen Schriftarten und Unicodes, die Sie für Ihre Websites -Typografie benötigen. Spezifische Teile von Schriftfamilien und nicht von ganzen Familien. Sie können Schriftstile usw. auswählen und Ihre eigenen CSS-Regeln/-dateien im Zusammenhang mit der Schrift mit einer Schriftart minifieren und weniger HTTP-Anfragen geben. |
| 5. Offline -Verfügbarkeit | Für mobile und Desktop -Apps, auf die offline zugegriffen wird. |
Probieren Sie das selbst aus.
Ich möchte Sie ermutigen, mit Ihrer spezifischen Site/App zu testen und die Dev-Tools in Kombination mit "Cache deaktivieren" und die integrierte Fähigkeit zur Änderung der Verbindungsgeschwindigkeiten zu verwenden.
Ich habe die Verwendung von npm packages zum Hinzufügen von Schriftarten nicht abgedeckt. Es gibt eine Reihe von Geschmacksrichtungen online, wenn dies Sie bevorzugen.
Einige Alternativen sollen versuchen, Fontsource oder nächste Google-Fonts zu verwenden.
