Beim Erstellen einer Webanwendung ist die Einbeziehung Ihrer bevorzugten Schriftart wie das Tüpfelchen auf dem i. Schriftarten verbessern den Text, machen die Website ansprechender und sorgen für ein besseres Benutzererlebnis. Designer und Entwickler lieben und hassen manche Schriftarten, und die Verwendung der Standardschriftart könnte ihre Kreativität einschränken. Das Hinzufügen benutzerdefinierter Schriftarten gibt Entwicklern die Freiheit, ihrer Anwendung eine externe Schriftart hinzuzufügen.

Voraussetzungen

In diesem Tutorial empfehle ich dringend, dass Sie über Grundkenntnisse von Tailwind CSS verfügen.

Ich gehe davon aus, dass der Leser mit Tailwind CSS vertraut ist und weiß, wie man Tailwind in eine Anwendung integriert. Wenn Sie Tailwind noch nicht kennen, finden Sie in der offiziellen Dokumentation Anweisungen zur Installation.

Was ist eine benutzerdefinierte Schriftart?

Benutzerdefinierte Schriftarten sind Schriftarten, die standardmäßig nicht zur Verwendung verfügbar sind. Benutzerdefinierte Schriftarten sind in Ihrem System nicht vorhanden und stehen bei Bedarf nicht sofort zur Verfügung. Dazu gehören Schriftarten, die Sie kaufen, online beziehen, selbst erstellen oder speziell gebrandete Schriftarten, die Ihr Unternehmen verwendet. Ein beliebtes Beispiel für eine benutzerdefinierte Schriftart ist die Google-Schriftart.

Hinzufügen benutzerdefinierter Schriftarten zu Ihrem Projekt

Wenn Sie Tailwind in Ihrem Projekt installieren, wird eine Datei mit dem Namen tailwind.config hinzugefügt. In der Datei tailwind.config fügen wir benutzerdefinierte Schriftarten, Farben, Rasterlayoutvorlagen, Schriftgrößen usw. hinzu. Um benutzerdefinierte Schriftarten hinzuzufügen, platzieren Sie die benutzerdefinierten Eigenschaften zwischen dem Erweiterungsobjekt. Sehen Sie unten, wie die Datei tailwind.config aussieht:

/* tailwind.config file */

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

Um eine benutzerdefinierte Schriftart hinzuzufügen, verwende ich Google Fonts. Gehen Sie zur Google-Font-Website, klicken Sie auf „Stile auswählen“ und wählen Sie dann Ihre bevorzugte Schriftart aus. Für dieses Tutorial verwende ich diese Rubik's-Schriftart. Sehen Sie sich die bildliche Darstellung der Google-Font-Website unten an, mit eingekreisten Zahlen als Orientierung:

Um den Google-Link an Ihre HTML-Datei anzuhängen, führen Sie die folgenden Schritte aus:

• Kopieren Sie den Link von Google.

• Gehen Sie zur Datei index.html.

• Suchen Sie das Head-Tag und fügen Sie den Link von Google Fonts ein.
  

Benutzerdefinierte Schriftarten verwenden

Nachdem Sie Rubik-Schriftarten in die Datei index.html eingefügt haben, sollte die Rubik-Schriftart in Ihrem Projekt verfügbar sein, aber Sie können sie noch nicht verwenden.

Um es zu verwenden:

Gehen Sie zur Datei tailwind.config.

Fügen Sie die Schriftartfamilie innerhalb des Erweiterungsobjekts hinzu.

Innerhalb der Schriftfamilie werde ich der Schriftart einen Namen geben, in diesem Fall lautet der Name rub. Es kann einen beliebigen Namen haben. Öffnen Sie eine Klammer, fügen Sie den Schriftartnamen („Rubik“) und eine Ersatzschriftart hinzu.

/* tailwind.config file */

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

Tailwind erkennt Rubiks Schriftart, aber ich habe sie nicht verwendet. Gehen Sie zu der Datei oder Komponente, für die Sie die Schriftart verwenden möchten, und fügen Sie die Schriftart von Rubik zu ihren class=''/className=''-Attributen hinzu. Um die benutzerdefinierte Schriftart auf Ihr Projekt anzuwenden, verwenden Sie Rub und nicht Rubik. Siehe das Beispiel unten:

// 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

Verwendung lokal heruntergeladener Schriftarten

Um lokal heruntergeladene Schriftarten zu verwenden, wähle ich eine zufällige Website aus. Sie können jede Website Ihrer Wahl ausprobieren. Gehen Sie zur Dafont-Website, suchen Sie in der Suchleiste nach einer Schriftart und laden Sie sie dann auf Ihren lokalen Computer herunter. Sehen Sie sich die bildliche Darstellung der Dafont-Website unten an, mit eingekreisten Zahlen als Orientierung:

Extrahieren Sie die ZIP-Datei (ich verwende WinRAR zum Extrahieren), kopieren Sie die extrahierte Datei und fügen Sie sie in einen Ordner in Ihrem Projekt ein. Siehe das Beispiel unten:

Der nächste Schritt besteht darin, zur Datei /index.css zu navigieren und @font-face einzufügen, um die benutzerdefinierte Schriftart in das Projekt zu integrieren. Ich werde ADELIA für die Schriftfamilie und src: verwenden, um anzugeben, wo die Schriftart verfügbar ist.

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

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

Um die Rubik-Schriftart zu integrieren, navigieren Sie zur Datei tailwind.config und führen Sie die folgenden Schritte aus:

• Fügen Sie einen benutzerdefinierten Dienstprogrammklassennamen hinzu.

• Eine Klammer öffnen

• Fügen Sie „ADELIA“ und „cursive“ als Ersatzschriftart ein.

Hier ist ein Beispiel:

/* tailwind.config file */

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

Wir können jetzt die Schriftart in unserem Projekt verwenden:

// 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

Abschluss

Sie können die benutzerdefinierte Schriftart in jeder Komponente oder Datei verwenden. Es gibt keine Beschränkungen auf eine bestimmte Datei oder Komponente; Sie können es in mehreren Komponenten oder Dateien in Ihrem Projekt verwenden. Außerdem können Sie der Konfigurationsdatei mehr als eine benutzerdefinierte Schriftart hinzufügen. Ich hoffe, der Artikel war hilfreich. Liken, kommentieren und teilen Sie, damit andere etwas lernen können. Gracias.