it-swarm.com.de

Wie füge ich Google-Schriftarten zu einer Gatsby-Site hinzu?

Erste Schritte mit Gatsby - Wenn ich mit der Google-Schriftart einen Link-Tag zu public/index.html hinzufüge, funktioniert er im Entwicklungsmodus. Wenn ich die Site erstelle, wird die index.html zurückgesetzt. Ich schätze, es gibt einen anderen richtigen Weg, um die Schrift hinzuzufügen.

12
enginedave

Fügen Sie Folgendes zum Anfang von src/layouts/index.css hinzu, um beispielsweise die Schrift "Roboto" von Google zu importieren

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

html {
  font-family: 'Roboto', sans-serif;
}

Dies wird dann vom Gatsby-Build-Prozess gehandhabt und in die endgültige Produktionsversion der Site aufgenommen.

14
enginedave

Sie können auch Reakt-Helm verwenden, was im gatsby Tutorial beschrieben wird. 

Fügen Sie ein Google-Fonts-Linkelement in die Helmkomponente ein.

So was:

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</Helmemt>

Am Ende ging ich diesen Weg, nachdem ich bereits einige manuelle Eingriffe vorgenommen hatte. Als ich Typography versuchte, nahm ich eine Reihe von Änderungen vor, die eine Weile gedauert hätten.

4
ptjetty

Ich war unter dem Eindruck Schriftbilder war der Weg zu gehen. Keine zusätzlichen (blockierenden) Netzwerkanfragen.

Solange Sie Ihre Schrift typeface- auf NPM finden können

3
skube

Sie können typography.js auch so verwenden, wie sie in den Dokumenten verweisen:

https://www.gatsbyjs.org/tutorial/part-two/#typographyjs

Hier ist die typeography.js github-Seite , die alle derzeit verfügbaren Schriftkombinationen auflistet.

2
Dade

Laut Gatsby (reag) Docs verhindert Gatsby-Plugin-Offline möglicherweise, dass Google-Schriftarten auf dem Server angefordert werden, wenn sie nicht mit CSS enden. Ich habe Typografie verwendet und am Ende eine Schriftart von CDN importiert, aber später sah ich hier diese Option, um gatsby-config zu übergeben, um die Standardeinstellung des Plugins zu überschreiben.

2
lorio

Sie können die Schriftarten auch selbst hosten. Gerade

In diesem Beispiel sollte der src-Ordner so aussehen:

/src/
     /styles/style.scss
     /fonts/roboto-v18-latin-regular.eot
     /fonts/roboto-v18-latin-regular.woff2
     /fonts/roboto-v18-latin-regular.woff
     /fonts/roboto-v18-latin-regular.ttf
     /fonts/roboto-v18-latin-regular.svg

* Sie müssen ein Plugin haben, das scss verwendet: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass

1
natterstefan

Sie können Zeichensätze mit diesem Plugin vorabholen https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts Auf diese Weise holt das Plugin in der Erstellungsphase Ihre Zeichensätze ab und speichert sie lokal, so dass Sie es können servieren Sie sie von Ihrem Server oder CDN.

1
Saša Šijak

Du kannst den ... benutzen offiziell Google Fonts-Plugin: https://www.npmjs.com/package/gatsby-plugin-google-fonts

0
eurotrash