nextjs tailwind googlefonts selfhost starter
1.0.0
La typographie peut faire vos applications zing !!!
L'ajout de polices Google vous permet d'utiliser des polices personnalisées dans vos applications. Ils sont annoncés comme gratuits et il y a plus de 900 familles de polices à choisir. Depuis 2018, Google a recommandé l'auto-hébergement comme un moyen d'ajouter leurs polices.
Il existe un certain nombre de polices de sécurité Web , qui sont gratuites et intégrées dans diverses plates-formes. Cependant, nous avons parfois besoin de quelque chose de plus personnalisé, pour servir nos objectifs de conception.
Donc "sans beaucoup plus loin-a-do" ...
Ce repo cible spécifiquement l'auto-hébergement des polices Google, plutôt que d'utiliser un lien vers leur CDN, et comment les intégrer dans une application Next.js qui utilise le vent arrière CSS.
Il y a un certain nombre d'avantages et d'inconvénients pour l'auto-hébergement, qui ont été discutés dans de nombreux articles et blogs, je ne les détaillerai pas ici. J'ai fourni quelques liens à la fin de ce fichier ReadMe, pour une lecture plus approfondie.
Les polices Google sont annoncées comme open source et gratuites à utiliser ...
Mais ne me croyez pas sur parole (je ne suis pas un laïc et ce n'est pas un conseil juridique)
Toutes les polices utilisées dans cet exemple proviennent de polices Google sous la licence SIL Open Font (OFL) v1.1. J'ai pris soin d'incorporer les licences dans les dossiers d'auto-hébergement dans le dépôt, qui est demandé dans l'OFL.
Remarque: vous devez toujours lire les informations de licence de police vous-même, car vous êtes responsable de la suivre. À l'heure actuelle, Google Fonts utilise OFL V1.1, certains utilisent la licence Apache 2. Les polices Ubuntu utilisent la licence de police Ubuntu v1.0
Vous devez demander un avis juridique avant l'auto-hébergement ou l'utilisation de polices personnalisées.
Voir le code démo ici
Vous pouvez vous procurer des polices Google de plusieurs façons (ce n'est pas une liste exhausative), en utilisant les outils suivants:
Les polices peuvent également être trouvées sur Google Github Repo.
Une fois, vous les avez téléchargés, vous pouvez les ajouter à votre projet à l'auto-hôte.
La façon la plus simple de les héberger est sous un dossier public , dans un sous-dossier nommé fonts .
J'ai structuré les emplacements des ressources de police comme suit, vous n'avez pas à suivre cela, il démontre la flexibilité et que toutes les polices peuvent être organisées plutôt que d'être simplement placées sous le sous-dossier
fonts.
├── 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
Les polices seront ServerD de cet emplacement à notre application Next.js.
Une fois que nous avons téléchargé les fichiers de police, les licences, les feuilles de styles, etc. et structuré les dossiers, nous devons effectuer un chargement de police.
Nous pouvons utiliser @ FONT-FACE pour charger les polices. Voir les fichiers CSS placés aux côtés des ressources de police dans le dossier font ci-dessus.
Nous pouvons éventuellement les importer dans le fichier CSS Styles Tailwind. Normalement, cela s'appelle global.css , j'utilise 3 fichiers qui sont importés dans le fichier suivant.js _app.js.
Par exemple:
@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;
} Nous effectuons ensuite quelques petites optimisations pour le chargement des polices à l'aide de l'attribut font-display .
En utilisant @font-face en combinaison avec des attributs font-display nous pouvons empêcher Fout et Foit.
Un certain nombre de stratégies sont disponibles pour mettre en œuvre ceci:
| Stratégie | Description |
|---|---|
1. block | Ne rendez rien à l'utilisateur jusqu'à ce que les polices soient chargées. |
2. swap | Recommandé pour les polices Google. Il échangera une fois que la police se chargera. |
3. fallback | non recommandé. Il montre toujours un texte invisible comme Block pendant une courte période, mais finira par se replier sur une police sûre. |
4. optional | Un bon choix lorsque la police n'est pas importante, plus concentrée sur la marque et le contenu. Est comme un replacement lent connecté qui pourrait même ne pas charger une police. |
Il s'agit d'une nouvelle règle que vous pouvez ajouter à votre déclaration de police qui indique au navigateur d'utiliser les fonds de sécurité du système de secours que vous avez énumérés (par exemple Sans Serif), puis d'échanger sur la police souhaitée lorsqu'elle a été téléchargée.
C'est une bonne amélioration des performances car elle affiche du contenu sans attendre que les téléchargements se terminent.
font-display: swap; a l'inconvénient de clignoter ce texte non style si la police n'a pas encore chargé. Mais nous pouvons y remédier avec la précharge.
Nous pouvons précharger nos polices dans le <head> de notre application de page. Ceci est particulièrement utile pour les bits critiques de la typographie que nous voulons afficher sans clignoter.
Todon, nous pouvons ajouter <preload> à la tête de nos page (s).
Dans next.js, nous l'ajoutons dans la personnalité _document.js comme suit:
< Head >
< link
rel =" preload "
href =" /fonts/google/grandstander/Grandstander-VariableFont_wght.ttf "
as =" font "
type =" font/ttf "
crossOrigin =" anonymous "
/>
</ Head > Remarque: Soyez prudent lorsque vous utilisez la précharge, car il peut avoir un effet négatif, s'il est surutilisé. Nous l'utilisons donc judicieusement. C'est une façon de définir l'importance d'une ressource, nous pouvons également faire de même pour nos ressources script si besoin est.
Ensuite, nous créons un fichier Fonts.css sous le dossier publicfonts . C'est là que nous importons les différents fichiers CCS pour les ressources Google de police chargées à l'aide @font-face ci-dessus, c'est-à-dire
@import './google/oswald/Oswald-Variable.css' ;Ceci est ensuite importé dans le fichier de style de vent arrière ci-dessous.
Ensuite, nous ajoutons ce qui suit dans le fichier app-base.css sous le dossier ./styles .
Nous utilisons la directive @layer pour indiquer à Tailwind quel "seau" nous ajoutons également les styles de police.
Les directives de couche valides sont une base, des composants et des services publics.
Par exemple:
@layer base {
@import "../public/fonts/fonts.css";
}
Nous importons ensuite les styles dans le fichier _app.js :
import '@/styles/app-base.css';
import '@/styles/app-components.css';
import '@/styles/app-utilities.css';
Enfin, nous avons configuré le fichier tailwind.config.js pour ajouter les familles de police à notre application. Nous les ajoutons aux thèmes de la police de base, soit étendons les thèmes (ou les deux).
Par exemple:
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'],
},
},
},
;
C'est ça. Nous avons terminé, consultez le code pour plus de détails.
Merci d'avoir lu. ? ?
Veuillez me jouer, si vous avez trouvé cela utile.
Ici suit, plus d'informations pour ceux qui peuvent le trouver utiles. ?
N'oubliez pas que vous pouvez utiliser Lighthouse pour tester les performances de votre page, cela recherchera également les optimations de police et de scripts et inclura des recommandations, y compris les problèmes FOT et FOIT.
Une fois construit, je suis heureux de dire que cette démo obtient ce qui suit en fonctionnant localement.
Les principales raisons que je choisis d'auto-hébergement sont les suivantes:
| 1. Google le recommande | C'est maintenant recommandé par Google eux-mêmes. Depuis 2018, Google a recommandé l'auto-hébergement, pour une performance optimale par préchargement. L'auto-hébergement est gratuit et est encouragé, voir cette vidéo: Google Chrome Developers: les performances Web sont facilitées. |
| 2. Mieux pour la vie privée | Les CDN tiers peuvent utiliser des cookies et des algorithmes de suivi que vous ne connaissez pas nécessairement. Cela peut être un problème dans les pays où vous avez besoin de consentement des utilisateurs (c'est-à-dire la confidentialité des données et le RGPD, voir: conformité au RGPD des polices Google. |
| 3. Mieux pour la sécurité | plus de contrôle sur votre propre serveur). Vous appelez réellement au moins 2 domaines lorsque vous utilisez le CDN. |
| 4. Plus rapide et plus performant | Google Fontts ajoute des ressources dont vous n'avez peut-être pas besoin. Vous pouvez choisir les styles de police, etc. et regrouper et minifiliser vos propres règles / fichiers CSS liés à la police, en donnant moins de demandes HTTP. Vous pouvez le faire en servant propriétaire les polices et unicodes spécifiques dont vous avez besoin pour la typographie de votre sites. Spécifier des parties des familles de polices plutôt que des familles entières. Vous pouvez choisir les styles de police, etc. et regrouper et minifiliser vos propres règles / fichiers CSS liés à la police, en donnant moins de demandes HTTP. |
| 5. Disponibilité hors ligne | Pour les applications mobiles et de bureau accessibles hors ligne. |
Essayez ceci par vous-même.
Je vous encourage à tester avec votre site / application spécifique et à utiliser les outils de développement combinés avec "Désactiver le cache" et la capacité intégrée à modifier les vitesses de connexion.
Je n'ai pas couvert l'utilisation de npm packages pour ajouter des polices. Il existe un certain nombre de saveurs disponibles en ligne si c'est votre préférence.
Certaines alternatives consistent à essayer d'utiliser FonTSource , ou les portes de google suivantes .
