Comment ajouter des polices Web à un site Web Next.js

Comment ajouter des polices Web à un site Web Next.js

Les polices Web sont un excellent moyen d'ajouter des polices personnalisées à votre site Web. Ces polices peuvent ne pas être disponibles sur le système d'un utilisateur, vous devez donc les inclure dans votre projet en les hébergeant ou en les référençant via un CDN.





Découvrez comment inclure des polices Web dans un site Web Next.js à l'aide de ces deux méthodes.



UTILISEZ LA VIDÉO DU JOUR

Utilisation de polices auto-hébergées dans Next.js

Pour ajouter des polices auto-hébergées dans Next.js, vous devez utilisez la règle CSS @font-face . Cette règle vous permet d'ajouter des polices personnalisées à une page Web.





Avant d'utiliser font-face, vous devez télécharger les polices que vous souhaitez utiliser. Il y a beaucoup de sites sur Internet qui offrent des polices gratuites , y compris les polices Google, fontspace et les sites Web dafont.

Une fois que vous avez téléchargé les polices Web, convertissez-les en différents formats de police pour prendre en charge plusieurs navigateurs. Vous pouvez utiliser outils gratuits de conversion de polices en ligne faire cela. Les navigateurs Web modernes prennent en charge les formats .woff et .woff2. Si vous devez prendre en charge les anciens navigateurs, vous devez également fournir les formats .eot et .ttf.



Créez un nouveau dossier appelé polices dans le répertoire de votre site et enregistrez-y vos fichiers de polices convertis.

L'étape suivante consiste à inclure les polices dans le styles/global.css fichier pour les rendre disponibles sur l'ensemble du site Web. Cet exemple montre les polices pour la police sirène en gras :



@font-face { 
    font-family: 'Mermaid'; 
    src: url('Mermaid-Bold.eot'); 
    src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'), 
        url('Mermaid-Bold.woff2') format('woff2'), 
        url('Mermaid-Bold.woff') format('woff'), 
        url('Mermaid-Bold.ttf') format('truetype'); 
    font-weight: bold; 
    font-style: normal; 
    font-display: swap; 
}

Une fois que vous avez inclus les fichiers de polices, vous pouvez utiliser ces polices dans un fichier CSS au niveau du composant :

comment envoyer un message privé sur youtube 
h1 { 
    font-family: Mermaid; 
}

Inclure des polices Web dans Next.js via un CDN

Certains sites Web proposent des polices Web via un CDN que vous pouvez importer dans votre application. Cette approche est facile à mettre en place car vous n'avez pas besoin de télécharger des polices ou de créer des polices. De plus, si vous utilisez des polices Google ou TypeKit, Next.js gère automatiquement l'optimisation.



Vous pouvez ajouter des polices à partir d'un CDN à l'aide de la balise de lien ou de la règle @import dans un fichier CSS.

La balise de lien va toujours à l'intérieur de la balise d'en-tête d'un document HTML. Pour ajouter une balise head dans Next.js, vous devez créer un document personnalisé. Ce document modifie les balises head et body utilisées pour afficher chaque page.

Commencez à utiliser cette fonctionnalité de document personnalisé en créant le fichier /pages/_document.js.

Ensuite, incluez le lien vers la police dans l'en-tête du fichier _document.js.

application pour regarder des films gratuits sur android 
import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document { 
  static async getInitialProps(ctx) { 
    const initialProps = await Document.getInitialProps(ctx); 
    return { ...initialProps }; 
  } 
  render() { 
    return ( 
      <Html> 
        <Head> 
          <link 
            href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap" 
            rel="stylesheet" 
          /> 
        </Head> 
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ); 
  } 
} 
export default MyDocument;

Comment utiliser la règle @import pour inclure des polices dans un projet Next.js

Une autre option consiste à utiliser la règle @import dans le fichier CSS dont vous souhaitez utiliser la police.

Par exemple, rendez la police disponible dans l'ensemble du projet en important la police Web dans le styles/global.css dossier.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Vous pouvez maintenant référencer la famille de polices dans un Sélecteur CSS comme ça:

h1 { 
    font-family:'Libre Caslon Display', serif; 
}

La règle @import vous permet d'importer une police dans un fichier CSS contenu. L'utilisation de la balise de lien rend la police accessible sur l'ensemble du site.

Devez-vous héberger les polices localement ou les importer via un CDN ?

Les polices hébergées localement sont généralement plus rapides que les polices importées depuis un CDN. En effet, le navigateur n'a pas à faire de demande supplémentaire au CDN de la police une fois la page Web chargée.

Si vous souhaitez utiliser des polices importées, préchargez-les pour améliorer les performances du site. Si les polices sont disponibles sur les polices Google ou Typekit, vous pouvez les importer et profiter des fonctionnalités d'optimisation de Next.js.