Schriftarten in React

Wir werden vorstellen, wie man Schriftarten installiert und Schriftarten in React verwendet.

Schriftarten in React

Schriftarten sind der wichtigste Teil einer Website. Es gibt verschiedene Möglichkeiten, Schriftarten in der React-Anwendung zu installieren.

Die gebräuchlichste Methode ist das Importieren einer Schriftart. Wir können eine Schriftart mit npm oder yarn in der Eingabeaufforderung importieren. Lassen Sie uns als Beispiel Quicksand installieren.

# react CLI
yarn add typeface-quicksand

oder

# react
npm install typeface-quicksand --save

Nach der Installation müssen wir es in die Datei index.tsx importieren.

# react
import 'typeface-quicksand';

Jetzt können wir es in der Datei style.css verwenden.

# react
h1,
p {
  font-family: Quicksand;
}

Ausgabe:

Eine andere Möglichkeit, Schriftarten in React zu installieren, besteht darin, Links direkt in die Datei index.html oder style.css einzufügen. Lassen Sie uns als Beispiel die Schriftart Lato installieren.

# react
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

Oder,

# react
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>

Importieren wir die Schriftart Lato und ändern den Stil für Überschrift und Absatz.

# react
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1,
p {
  font-family: Lato;
}

Ausgabe:

Eine andere Möglichkeit, Schriftarten in React zu installieren, besteht darin, sie herunterzuladen und in unseren Quellcode einzufügen.

Wir können Schriftarten einfach von fonts.google.com herunterladen und sie in das Verzeichnis fonts innerhalb unseres Verzeichnisses src verschieben.

Fügen Sie nun in style.css Schriftarten mit @font-face hinzu.

# react
@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

Für das ttf-Format müssen wir format('truetype') erwähnen, und für das woff-Format müssen wir format('woff') erwähnen.

Jetzt können wir mit dieser Schriftart ganz einfach stylen.

# react
h1,
p {
  font-family: Lato;
}

Ausgabe:

Eine andere Methode ist die Verwendung des Pakets web-font-loader. Wir können ein web-font-loader-Paket einfach mit npm oder yarn installieren.

# react
yarn add webfontloader

Oder,

# react
npm install webfontloader --save

Jetzt können wir in index.tsx die benötigte Schriftart importieren und angeben.

# react
import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Lato:300,400,700', 'sans-serif']
   }
});

Jetzt haben wir also vier verschiedene Möglichkeiten kennengelernt, Schriftarten in React zu installieren und zu verwenden.