“Atlas” is the font used in the movie The Great Gatsby. This font is designed by Harold's Fonts. You can purchase it from the link below.
Active12 days ago
Getting started with Gatsby - when I add a link tag to public/index.html with the google font it works in development mode. When I build the site the index.html gets reset. So I guess there is another proper way to add the font?
Add the following to the top of src/layouts/index.css for example to import the 'Roboto' font by Google
This will then be handled by the gatsby build process and included in the final production version of the site.
enginedaveenginedave
You can also use react-helmet, which is discussed in the gatsby tutorial.
Include a google fonts link element within the helmet component.
Like this:
I ended up going down this route because I had already done some styling manually, and when I tried using Typography it made a bunch of changes that would have taken me a while to undo.
ptjettyptjetty
I was under the impression Typefaces was the way to go. No extra (blocking) network requests.
As long as you can find your typeface- font on NPM
You can also use typography.js like they reference in the docs:
Here is the typeography.js github page that lists all the font combination they currently have available.
DadeDade
You can prefetch fonts with this plugin https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts This way in the build phase, the plugin will fetch your fonts and store it locally so you can serve them from your server or CDN.
According to Gatsby(react) Docs, gatsby-plugin-offline may prevent Google fonts from being requested on the server if they do not end in .css. I used Typography and ended up importing one font from CDN but later saw here this option to pass in gatsby-config to override the plugin's default.
loriolorio
You can also host the fonts by yourself. Just
Download the font files first: https://google-webfonts-helper.herokuapp.com/fonts/.
and add the css to your styles.scss*: https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin.
In this example the src-folder shoud look like:
* you have to have a plugin like to use scss: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass
natterstefannatterstefan
You can use the official google fonts plugin:https://www.npmjs.com/package/gatsby-plugin-google-fonts