Wie verwende ich Google-Schriftarten in React.js?

Ich hatte eine Website mit React.js und Webpack erstellt .

Ich möchte Google-Schriftarten auf der Webseite verwenden, daher habe ich den Link in den Abschnitt eingefügt.

Google Fonts

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

Und CSS einstellen

body{
    font-family: 'Bungee Inline', cursive;
}

Es funktioniert jedoch nicht.

Wie kann ich dieses Problem lösen?

Führen Sie in einer Art Haupt- oder Erstlade-CSS-Datei einfach Folgendes aus:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

Sie müssen keine Art von @ font-face usw. einbinden. Die Antwort, die Sie von der Google-API erhalten, ist sofort einsatzbereit und ermöglicht die Verwendung von Schriftfamilien wie gewohnt.

Fügen Sie dann in Ihrer Hauptreaktions-App JavaScript oben Folgendes ein:

import './assets/css/fonts.css';

Was ich tatsächlich gemacht habe, war ein app.cssImport fonts.cssmit ein paar Schriftimporten. Einfach zur Organisation (jetzt weiß ich, wo sich alle meine Schriftarten befinden). Wichtig ist, dass Sie zuerst die Schriftarten importieren.

Beachten Sie, dass alle Komponenten, die Sie in Ihre React-App importieren, nach dem Stilimport importiert werden sollten. Insbesondere, wenn diese Komponenten auch ihre eigenen Stile importieren. Auf diese Weise können Sie sicher sein, dass die Stile sortiert sind. Aus diesem Grund ist es am besten, Schriftarten oben in Ihre Hauptdatei zu importieren (vergessen Sie nicht, Ihre endgültige gebündelte CSS-Datei zu überprüfen, um zu überprüfen, ob Sie Probleme haben).

Es gibt einige Optionen, mit denen Sie die Google Font-API übergeben können, um beim Laden von Schriftarten usw. effizienter zu sein. Siehe offizielle Dokumentation: Erste Schritte mit der Google Fonts-API

Bearbeiten, Hinweis: Wenn Sie mit einer "Offline" -Anwendung arbeiten, müssen Sie möglicherweise die Schriftarten herunterladen und über Webpack laden.

Google-Schriftarten in React.js?

Öffnen Sie Ihr Stylesheet, dh app.css, style.css (welchen Namen Sie haben), es spielt keine Rolle, öffnen Sie einfach das Stylesheet und fügen Sie diesen Code ein

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

und vergessen Sie nicht, die URL Ihrer gewünschten Schriftart zu ändern, sonst funktioniert es einwandfrei

und benutze dies als:

body {
  font-family: 'Josefin Sans', cursive;
}

Wenn Sie die Umgebung "React App erstellen" verwenden, fügen Sie einfach die @ import-Regel als solche zu index.css hinzu :

@import url('https://fonts.googleapis.com/css?family=Anton');

Importieren index.css in Ihre React-Hauptanwendung:

import './index.css'

React bietet Ihnen die Wahl zwischen Inline-Stil, CSS-Modulen oder gestalteten Komponenten, um CSS anzuwenden:

font-family: 'Anton', sans-serif;

Sie sollten dieses Tutorial sehen: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

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

Ich habe gerade diese Methode ausprobiert und ich kann sagen, dass sie sehr gut funktioniert;)

Fügen Sie in Ihrer CSS-Datei, z. B. App.css in einer App zum Erstellen und Reagieren, einen Schriftartenimport hinzu. Beispielsweise:

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

Fügen Sie dann einfach die Schriftart zum DOM-Element in derselben CSS-Datei hinzu.

body {
  font-family: 'Bungee Inline', cursive;
}

Hatte das gleiche Problem. Es stellte sich heraus, dass ich "statt verwendet habe' .

verwenden @import url('within single quotes'); so

nicht @import url("within double quotes");so

Ich habe @import und @ font-face in meine CSS-Datei eingefügt und es hat funktioniert.

Eine weitere Option für alle guten Antworten hier ist das npm-Paket react-google-font-loader, das Sie hier finden .

Die Verwendung ist einfach:

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

Dann können Sie einfach den Familiennamen in Ihrem CSS verwenden:

body {
    font-family: 'Bungee Inline', cursive;
}

Haftungsausschluss: Ich bin der Autor des react-google-font-loaderPakets.

Wenn jemand nach einer Lösung mit (.less) sucht, versuchen Sie es unten. Öffnen Sie Ihre Haupt- oder weniger gemeinsame Datei und verwenden Sie sie wie unten beschrieben.

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

Es könnte das selbstschließende Tag des Links am Ende sein. Versuchen Sie:

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

und in Ihrer main.css-Datei versuchen Sie:

body,div {
  font-family: 'Bungee Inline', cursive;
}

Hier sind zwei verschiedene Möglichkeiten, wie Sie Ihrer Reaktions-App Schriftarten hinzufügen können.

Hinzufügen lokaler Schriftarten

1. Erstellen Sie einen neuen Ordner mit dem Namen fontsin Ihrem srcOrdner.

2. Laden Sie die Google-Schriftarten lokal herunter und legen Sie sie im fontsOrdner ab.

3. Öffnen Sie Ihre index.cssDatei und geben Sie die Schriftart an, indem Sie auf den Pfad verweisen.

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

Hier habe ich eine RajdhaniSchriftart hinzugefügt .

Jetzt können wir unsere Schriftart in solchen CSS-Klassen verwenden.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Hinzufügen von Google-Schriftarten

Wenn Sie Google-Schriftarten (API) anstelle lokaler Schriftarten verwenden möchten, können Sie diese wie folgt hinzufügen.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

In ähnlicher Weise können Sie es auch index.htmlmit dem linkTag in die Datei einfügen.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(ursprünglich veröffentlicht unter https://reactgo.com/add-fonts-to-react-app/ )