Wie verwende ich Google-Schriftarten in React.js?

95

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?

Kevin Hsiao
quelle
1
Sie setzen das <link>in den Seitenkopf, nicht in Ihre Reaktions-App, richtig? Geben Sie die font-familyStelle an einer anderen Stelle in Ihrem Stylesheet oder direkt auf Ihren Elementen an?
Timo
Verwenden Sie https und haben Sie eine Sicherheitsrichtlinie?
Stuart
Eigentlich weiß ich, wie Google Fonts richtig importiert wird. Ich glaube, ich brauche ein einfaches Beispiel. Können Sie mir helfen ...
Kevin Hsiao
Wie sieht dein Abschlag aus? Definieren Sie andere Stile, die diesen allgemeineren überschreiben könnten?
Manonthemat
Ich hatte dieses Problem gelöst ..... Die Methode, die ich zuvor ausprobiert hatte, war falsch. Dies ist die richtige Methode. Lokale Verwendung von Google Fonts (in hjs-webpack und React) Es gibt jedoch immer noch einige Fehler im Webpack-Prozess. Diese zwei Zeilen sollten in die Datei webpack.config.js geschrieben werden. { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Kevin Hsiao

Antworten:

83

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.

Tom
quelle
Können Sie bitte erklären, warum die Verwendung von Links in HTML Head nicht funktioniert?
Doobean
58

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;
}
Rizo
quelle
Ist es nicht besser, die Schriftarten mit JS zu laden? Ich meine aus Leistungsgründen.
Simon Franzen
Können Sie bitte erklären, warum die Verwendung von Links in HTML Head nicht funktioniert?
Doobean
21

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;
Max
quelle
11

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;)

Aldobsom
quelle
8

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;
}
mrdougwright
quelle
3
Es ist @ font-face, wenn Sie das möchten, und es ist mit der Google Font API nicht erforderlich.
Tom
Aber was ist, wenn Sie Ihre Schriftarten in einer CSS-Datei definieren möchten , weil sie dort hingehören? Sie möchten dennoch das Hosting von Google nutzen? Ist es dann nicht notwendig oder gibt es einen besseren Weg?
Stein
5

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

Deke
quelle
2

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.

Jake Taylor
quelle
1

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;
}
Jaison
quelle
0

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;
}
Rupert
quelle
0

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

saigowthamr
quelle