web-dev-qa-db-fra.com

Comment ajouter des polices Google à un site gatsby

Premiers pas avec Gatsby - Lorsque j'ajoute une balise de lien à public/index.html avec la police Google, cela fonctionne en mode développement Lorsque je construis le site, l'index.html est réinitialisé. Je suppose donc qu’il existe un autre moyen approprié d’ajouter la police?

reactjsfontsgatsby
12
enginedave

Ajoutez ce qui suit en haut de src/layouts/index.css, par exemple pour importer la police "Roboto" de Google.

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

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

Ceci sera ensuite géré par le processus de construction de gatsby et inclus dans la version de production finale du site.

14
enginedave

Vous pouvez également utiliser react-helmet , qui est décrit dans le didacticiel gatsby . 

Incluez un élément de lien de polices Google dans le composant casque.

Comme ça:

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

J'avais déjà fait cette mise au point manuellement et lorsque j'ai essayé d'utiliser la typographie, cela a apporté un tas de modifications qui auraient pris un certain temps à annuler.

4
ptjetty

J'étais sous l'impression Les polices de caractères était la voie à suivre. Aucune demande réseau supplémentaire (bloquante).

Tant que vous pouvez trouver votre police typeface- sur NPM

3
skube

Vous pouvez également utiliser typography.js comme ils se réfèrent à la documentation:

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

Voici la page typeography.js github qui répertorie toutes les combinaisons de polices disponibles.

2
Dade

Vous pouvez également héberger les polices par vous-même. Juste

Dans cet exemple, le dossier src devrait ressembler à ceci:

/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

* vous devez avoir un plugin comme pour utiliser scss: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass

1
natterstefan

Vous pouvez pré-extraire les polices avec ce plugin https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts Ainsi, lors de la phase de construction, le plug-in récupère vos polices et les stocke localement afin que vous puissiez les servir depuis votre serveur ou votre CDN.

1
Saša Šijak

Vous pouvez utiliser le officiel plug-in de polices Google: https://www.npmjs.com/package/gatsby-plugin-google-fonts

0
eurotrash