Lors de la création d'une application Web, inclure votre police préférée est comme la cerise sur le gâteau. Les polices améliorent le texte, rendent le site Web plus attrayant et offrent une meilleure expérience utilisateur. Les concepteurs et les développeurs aiment et détestent certaines polices, et l'utilisation de la police par défaut peut limiter leur créativité. L'ajout de polices personnalisées donne aux développeurs la liberté d'ajouter une police externe à leur application.

Conditions préalables

Dans ce tutoriel, je vous recommande fortement d'avoir des connaissances de base de Tailwind CSS.

Je suppose que le lecteur est familier avec Tailwind CSS et comment intégrer Tailwind dans une application. Si vous êtes nouveau sur Tailwind, vous pouvez consulter la documentation officielle pour obtenir des instructions sur la façon de l'installer.

Qu'est-ce qu'une police personnalisée ?

Les polices personnalisées sont des polices qui ne sont pas disponibles par défaut. Les polices personnalisées n'existent pas dans votre système et ne sont pas facilement disponibles en cas de besoin. Elles incluent les polices que vous achetez, mettez en ligne, créez vous-même ou des polices de marque spécialement utilisées par votre entreprise. Un exemple populaire de police personnalisée est la police Google.

Ajout de polices personnalisées à votre projet

Lorsque vous installez Tailwind sur votre projet, il ajoute un fichier nommé tailwind.config. À l'intérieur du fichier tailwind.config se trouve l'endroit où nous ajoutons des polices personnalisées, des couleurs, des modèles de disposition de grille, des tailles de police, etc. Pour ajouter des polices personnalisées, placez les propriétés personnalisées entre l'objet d'extension. Voyez ci-dessous à quoi ressemble le fichier tailwind.config :

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

Pour ajouter une police personnalisée, j'utiliserai Google Fonts. Accédez au site Web des polices Google, cliquez sur Sélectionner les styles, puis sélectionnez votre police préférée. Pour ce tutoriel, j'utiliserai la police Rubik's. Voir la représentation picturale du site Web Google-Font ci-dessous, avec des chiffres encerclés à titre indicatif :

Pour joindre le lien Google à votre fichier HTML, procédez comme suit :

• Copiez le lien depuis Google.

• Accédez au fichier index.html.

• Recherchez la balise head et collez le lien de Google Fonts à l'intérieur.
  

Utiliser des polices personnalisées

Après avoir collé les polices Rubik dans le fichier index.html, la police Rubik devrait être disponible dans votre projet, mais vous ne pouvez pas encore l'utiliser.

Pour l'utiliser :

Accédez au fichier tailwind.config.

Ajoutez la fontFamily à l'intérieur de l'objet d'extension.

Dans la famille de polices, je donnerai un nom à la police, dans ce cas, le nom est rub. Il peut porter n'importe quel nom. Ouvrez un support, ajoutez le nom de la police ("Rubik") et une police de sauvegarde.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind reconnaît la police Rubik, mais je ne l'ai pas utilisée. Accédez au fichier ou au composant sur lequel vous souhaitez utiliser la police et ajoutez la police Rubik's à ses attributs class=''/className=''. Pour appliquer la police personnalisée à votre projet, utilisez rub, pas Rubik. Voir l'exemple ci-dessous :

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Utilisation de polices téléchargées localement

Pour utiliser les polices téléchargées localement, je choisirai un site Web au hasard. Vous pouvez essayer n’importe quel site Web de votre choix. Accédez au site Web de Dafont, recherchez une police dans la barre de recherche, puis téléchargez-la sur votre ordinateur local. Voir la représentation picturale du site dafont ci-dessous, avec les chiffres encerclés à titre indicatif :

Extraisez le fichier zip (j'utilise WinRAR pour extraire), copiez le fichier extrait et collez-le dans un dossier de votre projet. Voir l'exemple ci-dessous :

L'étape suivante consiste à accéder au fichier /index.css et à insérer @font-face pour importer la police personnalisée dans le projet. J'utiliserai ADELIA pour la famille de polices et src: pour préciser où la police est disponible.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

Pour intégrer la police Rubik, accédez au fichier tailwind.config et suivez les étapes suivantes :

• Ajoutez un nom de classe d'utilitaire personnalisé.

• Ouvrir une parenthèse

• Insérez « ADELIA » et « cursive » comme police de sauvegarde.

Voici un exemple :

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

Nous pouvons maintenant utiliser la police dans notre projet :

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Conclusion

Vous pouvez utiliser la police personnalisée dans n'importe quel composant ou fichier. Il n'y a aucune limitation à un fichier ou un composant spécifique ; vous pouvez l'utiliser dans plusieurs composants ou fichiers tout au long de votre projet. Vous pouvez également ajouter plusieurs polices personnalisées au fichier de configuration. J'espère que l'article a été utile. Aimez, commentez et partagez pour que les autres puissent apprendre. Merci.