Comment ajouter des polices Web à un site Web Next.js
Les polices de caractères Web sont un excellent moyen d’ajouter des polices personnalisées à votre site Web. Ces polices peuvent ne pas être offertes sur le système d’un client, vous devez donc les inclure dans votre projet en les hébergeant ou en les référençant à l’aide d’un CDN.
Apprenez juste comment consister des polices internet dans un site web Next.js en utilisant ces 2 approches.
Utilisation de polices auto-hébergées dans Next.js
Pour ajouter des polices auto-hébergées dans Next.js, vous devez faire usage de la règle CSS @font-face. Cette ligne directrice vous permet d’inclure des polices de caractères personnalisées à une page Web.
Avant d’utiliser font-face, vous devez télécharger et installer les polices de caractères que vous souhaitez utiliser. Il existe de nombreux sites sur le web qui proposent des polices gratuites, notamment les sites Google fonts, fontspace, ainsi que dafont.
Une fois que vous avez téléchargé et installé les polices de caractères web, transformez-les en différents styles de police pour prendre en charge plusieurs navigateurs. Pour ce faire, vous pouvez utiliser des outils de conversion de style de police en ligne gratuits. Les navigateurs Internet modernes prennent en charge les mises en page .woff et .woff2. Si vous devez prendre en charge les navigateurs hérités, vous devez également fournir des mises en page .eot et .ttf.
Créez un nouveau dossier appelé polices dans le répertoire de votre site ainsi que d’y enregistrer vos fichiers de polices convertis.
L’étape suivante consiste à constituer les polices de caractères dans le répertoire styles/ global.css pour les rendre disponibles à l’ensemble du site web. Cet exemple révèle les faces de la police de caractères de la sirène en fort :
Une fois que vous avez consisté les données de police, vous pouvez utiliser ces polices dans une donnée CSS de niveau composant :
Inclure des polices Web à Next.js via un CDN
Certains sites servent des polices web à l’aide d’un CDN que vous pouvez importer dans votre application. Cette stratégie est simple à mettre en place puisque vous n’avez pas besoin de télécharger des polices de caractères ou de développer des faces de polices. De plus, si vous faites usage des polices de caractères Google ou TypeKit, Next.js gère automatiquement l’optimisation.
Vous pouvez inclure des polices provenant d’un CDN en utilisant la balise web link ou la ligne directrice @import à l’intérieur d’une donnée CSS.
Comment importer des polices dans un projet Next.js à l’aide d’une balise de lien.
La balise de lien web va toujours à l’intérieur de la balise head d’un document HTML. Pour inclure une balise head dans Next.js, vous devez développer un fichier personnalisé. Ce document change la balise head ainsi que la balise body utilisées pour faire chaque page.
Commencez à utiliser cette fonction d’enregistrement personnalisé en développant les données. / pages/ _ document.js.
Ensuite, composez le lien web vers le caractère dans la tête de la donnée _ document.js.
Comment utiliser la règle @import pour inclure des polices de caractères dans un projet Next.js.
Une autre option consiste à faire usage de la ligne directrice @import dans les documents CSS que vous souhaitez utiliser le style de police.
Par exemple, rendez la police de caractères disponible dans l’ensemble du travail en important la police de caractères Web dans le fichier styles/ global.css documents.
Vous pouvez maintenant référencer la famille de styles de police dans un sélecteur CSS similaire à celui-ci :
La règle @import vous permet d’importer un style de police dans un fichier CSS inclus. L’utilisation de la balise web link rend la police de caractères facilement accessible sur l’ensemble du site web.
Devriez-vous héberger les polices localement ou les importer à l’aide d’un CDN ?
Les polices de caractères conservées localement sont normalement plus rapides que les polices de caractères importées à partir d’un CDN. Cela s’explique par le fait que le navigateur internet n’a pas à faire une demande supplémentaire au CDN de la police une fois la page web emballée.
Si vous souhaitez utiliser des polices importées, préchargez-les pour améliorer les performances du site. Si les styles de polices sont disponibles sur Google typefaces ou Typekit, vous pouvez les importer et également tirer le meilleur parti des fonctionnalités d’optimisation de Next.js.
Comment ajouter des polices à Nextjs ?
Il existe deux façons d’ajouter une police Google dans Next.js
- Composant Next Head avec CDN.
- Téléchargez la police localement et ajoutez Next.js.
- Utilisez la méthode d’importation CSS.
Comment précharger les polices dans Nextjs ?
Voici le code que j’ai dans Next@10.0.5 – pour précharger les polices externes et internes. En ce qui concerne les polices internes que vous avez dans votre dossier public, cela nécessite ;
- configuration du chargeur de fichiers dans la suite. configuration. js , il s’agit de résoudre le nom de fichier haché.
- Définition de type pour les polices.
- Ensuite, importez-le dans votre tête.
Comment installer les polices Web ?
Pour installer les polices Web, téléchargez le dossier nommé « fonts » dans le répertoire de votre serveur, où vous avez placé votre fichier css principal. Copiez le contenu de la « feuille de style. css », y compris les déclarations de licence et @font-face dans votre fichier css principal. Il est généralement préférable de le coller au début de votre fichier.
