chore(docs): Recipes cleanup & Fonts guides

docs/docs/cheat-sheet.md

@@ -104,16 +104,6 @@ Get the PDF: <a href="/gatsby-cheat-sheet.pdf" download>gatsby-cheat-sheet.pdf</
           </p>
         </td>
       </tr>
-      <tr>
-        <td>
-          <p>Quick Reference Guide</p>
-        </td>
-        <td>
-          <p>
-            <a href="https://gatsby.dev/recipes">gatsby.dev/recipes</a>
-          </p>
-        </td>
-      </tr>
       <tr>
         <td>
           <p>Adding Images</p>

docs/docs/how-to/cloud/working-with-redirects-and-rewrites.md

@@ -7,18 +7,17 @@ description: "Learn how to leverage redirects, rewrites, and reverse proxies in
 
 Redirects are settings in the network layer that allow you to route traffic from one url path to another with little to no disruption.
 
-For instance, while rebuilding your cooking blog, you might want to move all of your recipes from their old path of blog/recipes to a new path of recipes. To make sure that all the existing links to your recipes still work, you would need a way to redirect your users from blog/recipes/mouthwatering-lasagna to recipes/mouthwatering-lasagna. No one wants to lose access to such a, well, mouthwatering recipe.
+For instance, while rebuilding your cooking blog, you might want to move all of your recipes from their old path of `blog/recipes` to a new path of recipes. To make sure that all the existing links to your recipes still work, you would need a way to redirect your users from `blog/recipes/mouthwatering-lasagna` to `recipes/mouthwatering-lasagna`. No one wants to lose access to such a, well, mouthwatering recipe.
 
 ## Prerequisites
 
-1. In order to use redirects, you must include the gatsby-plugin-gatsby-cloud in your project.
-1. If your Gatsby project doesn't already have a gatsby-node.js file, add one at that top level of your project (alongside your gatsby-config.js).
+- If your Gatsby project doesn't already have a `gatsby-node.js` file, add one at that top level of your project (alongside your `gatsby-config.js`).
 
 ## Directions
 
 1. In `gatsby-node.js`, export the `createPages` method and use the `createRedirects` action to generate any redirects that you want to add. Here's an example showing the lasagna recipe above:
 
-```javascript:title=gatsby-node.js
+```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
   const { createRedirect } = actions
 
@@ -29,12 +28,13 @@ exports.createPages = async ({ graphql, actions }) => {
 }
 ```
 
-2 . Once you've made these changes and deployed the changes through Gatsby Cloud, you should be able to test your changes once the CDN cache has been purged.
+2. Once you've made these changes and deployed the changes through Gatsby Cloud, you should be able to test your changes once the CDN cache has been purged.
 
 ## Advanced use cases
 
-Wildcard Path Redirects
-In our example above, you've explicitly redirected one of your recipe urls, and after adding a few others, you realize that you won't have time to get all the old urls. So you decide that any other url that uses your old path `blog/recipes/*` should just be redirected to the new `/recipes` path. Here's how you'd handle that:
+### Wildcard Path Redirects
+
+In the example above, you've explicitly redirected one of your recipe urls, and after adding a few others, you realize that you won't have time to get all the old urls. So you decide that any other url that uses your old path `blog/recipes/*` should just be redirected to the new `/recipes` path. Here's how you'd handle that:
 
 ```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
@@ -56,7 +56,7 @@ exports.createPages = async ({ graphql, actions }) => {
 
 ### Splat redirects
 
-Extending our wildcard example above, you may have a high degree confidence that all of your old recipes that lived at `/blog/recipes` have been migrated to `/recipe`. In that case, you can use a `*` marker in the toPath to indicate that you want the redirect to include everything after the base url. In that case `/blog/recipes/any-awesome-url-path` would become `/recipes/any-awesome-url-path`. Here's how you'd handle that:
+Extending the wildcard example above, you may have a high degree confidence that all of your old recipes that lived at `/blog/recipes` have been migrated to `/recipe`. In that case, you can use a `*` marker in the toPath to indicate that you want the redirect to include everything after the base url. In that case `/blog/recipes/any-awesome-url-path` would become `/recipes/any-awesome-url-path`. Here's how you'd handle that:
 
 ```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
@@ -74,7 +74,6 @@ exports.createPages = async ({ graphql, actions }) => {
 If your site has multi-national pages, Gatsby provides the ability of redirecting based in the country that the request is made. We use a Two-letter country code based on the regional indicator symbol standard to define the country you might want to redirect. If you would like a certain page redirected to its language equivalent you can use the conditions: `{ country: ""}` key in `createRedirect`. `country` can either be a string or an array of strings.
 
 ```js:title=gatsby-node.js
-// gatsby-node.js
 createRedirect({
   fromPath: `/blog`,
   toPath: `/italian/blog`,

docs/docs/how-to/images-and-media/importing-assets-into-files.md

@@ -50,7 +50,7 @@ Please be advised that this is also a custom feature of webpack.
 
 ### Additional resources
 
-- More on [using an imported font](/docs/recipes/styling-css#adding-a-local-font).
+- More on [using an imported font](/docs/how-to/styling/using-local-fonts/).
 
 ## Querying for a `File` in GraphQL using gatsby-source-filesystem
 

docs/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront.md

@@ -128,7 +128,6 @@ If you need the full address elsewhere in your config, you can access it via `si
 ## References:
 
 - [Gatsby on AWS, the right way](https://blog.joshwalsh.me/aws-gatsby/)
-- [Using CloudFront with gatsby-plugin-s3](https://github.com/jariz/gatsby-plugin-s3/blob/master/recipes/with-cloudfront.md)
 - [Publishing Your Next Gatsby Site to AWS With AWS Amplify](/blog/2018-08-24-gatsby-aws-hosting/)
 - [Escalade Sports: From $5000 to $5/month in Hosting With Gatsby](/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/)
 - [Deploy your Gatsby.js Site to AWS S3](https://github.com/bennewton999/blog2018/blob/master/content/posts/11-24-2017/index.md)

docs/docs/how-to/styling/using-local-fonts.md

@@ -6,54 +6,54 @@ This guide covers how to add local fonts to your Gatsby site.
 
 ## Prerequisites
 
-This guide uses the Gatsby [default starter](https://github.com/gatsbyjs/gatsby-starter-default) and a font file. Some common font file extensions are `.woff2` and `.woff`.
+- A Gatsby project set up. (Need help creating one? Follow the [Quick Start](https://www.gatsbyjs.com/docs/quick-start/))
+- Font file(s), e.g. from [Inter](https://rsms.me/inter/). Common font file extensions are `.woff2` and `.woff`
 
-## Using local fonts in Gatsby
+## Directions
 
-Get started by using local fonts by adding them to your project. Copy the font file into your Gatsby project, for example, `src/fonts/fontname.woff2`.
+### Place the font files into your project
 
-**NOTE:** For performance reasons, it’s recommended to limit the number of custom fonts added.
+When you downloaded your font file(s), e.g. from [Inter](https://rsms.me/inter/) you fill most likely have a bunch of different files available (this can differ a lot between fonts). You'll want to use the "Web" versions or [Variable Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) versions of your font. They are optimized for the usage on the web.
 
-The Gatsby default starter project adds [browser safe font](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Default_fonts) styling in the `layout.css` file.
+Furthermore, in this next step you should only choose the font styles and weights you absolutely must, as it's benefitial for performance to limit the number of fonts.
 
-```css:title=src/components/layout.css
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-}
-```
+Place your font(s) into a `static/fonts` directory. For the sake of this guide the `Inter/Inter Web/Inter-roman.var.woff2` file is used. It's a web optimized, variable, subset font file of Inter.
 
-You will need to create a new CSS rule to use your local font in your project. First, create a `typography.css` file and declare your `@font-face` selector.
+The `static` folder (see the [Using the Static Folder](/docs/how-to/images-and-media/static-folder/) guide) contents will be copied over to the `public` folder so you can reference the files in your other files.
 
-```css:title=src/css/typography.css
-@font-face {
-  font-family: "Font Name";
-  src: url("../fonts/fontname.woff2");
-}
-```
+### Preload your fonts
 
-Next, import the `typography.css` file into `layout.css`. Add the `font-family` value in the appropriate CSS rules to adjust the styling.
+For the best performance possible it's recommended to [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) your font files. Add a `gatsby-ssr.js` if not existent yet and add the following:
 
-```css:title=src/components/layout.css
-// highlight-next-line
-@import "../css/typography.css";
+```js:title=gatsby-ssr.js
 
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: "Font Name", georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <link
+      rel="preload"
+      href="/fonts/Inter-roman.var.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
+  ])
 }
 ```
 
-**NOTE:** If fonts are not updating by following the above, add the `font-family` value in your CSS file as needed.
+### Use the fonts in your CSS
 
-## Other resources
+This section depends on the styling option you chose and the fonts you chose. Refer to the respective documentation for details. In this guide a `global.css` file is added to the root, imported into a `gatsby-browser.js` file and has the following contents:
+
+```css:title=global.css
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url(/fonts/Inter-roman.var.woff2?v=3.19) format("woff2");
+}
+```
 
-- Check out the [Adding a Local Font](/docs/recipes/styling-css/#adding-a-local-font) Gatsby recipe.
+The important piece is the `src`. Point the `url` to your `fonts` directory.

docs/docs/how-to/styling/using-web-fonts.md

@@ -6,71 +6,49 @@ This guide covers how to add fonts from web services to your Gatsby site.
 
 ## Prerequisites
 
-This guide uses the Gatsby [default starter](https://github.com/gatsbyjs/gatsby-starter-default).
+- A Gatsby project set up. (Need help creating one? Follow the [Quick Start](https://www.gatsbyjs.com/docs/quick-start/))
 
-## Adding web fonts
+## Using Google Fonts
 
-Some examples of web font services include [Google Fonts](https://fonts.google.com/) and [Typekit Web Fonts](https://fonts.adobe.com/typekit).
+There are different ways of adding web fonts like Google Fonts to Gatsby, in this guide you'll use the recommended [`gatsby-omni-font-loader`](https://github.com/codeAdrian/gatsby-omni-font-loader). As in the self-hosting example below you'll add the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font.
 
-## gatsby-plugin-web-font-loader
-
-`gatsby-plugin-web-font-loader` is a Gatsby plugin which makes it easy to add web fonts using the popular [Web Font Loader](https://github.com/typekit/webfontloader) library. It supports loading fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts.
-
-### How to use Web Font Loader with Typekit
-
-You can add Typekit Web Fonts to your project by using the [gatsby-plugin-web-font-loader](/plugins/gatsby-plugin-web-font-loader/?=font) and your [Adobe Fonts project id](https://fonts.adobe.com/my_fonts#web_projects-section). For example, this is how you can add Futura to your project.
-
-First, install the Gatsby plugin with npm:
-
-```shell
-npm install --save gatsby-plugin-web-font-loader
-```
-
-Or with yarn:
+1. Install the plugin and its peerDependencies:
 
 ```shell
-yarn add gatsby-plugin-web-font-loader
+npm install gatsby-omni-font-loader react-helmet
 ```
 
-Then, create an [environment variable](/docs/how-to/local-development/environment-variables/) to store your Adobe Fonts project ID. (Make sure this file is in your `.gitignore` file so your ID doesn't get committed!) For example, if your Adobe Fonts project ID is `abcdefg`, your `.env` file will look like this:
-
-```text:title=.env
-TYPEKIT_ID=abcdefg
-```
-
-Now you can add the `gatsby-plugin-web-font-loader` plugin to your `gatsby-config.js` file, located in your root directory. In your plugin configuration, pass in the environment variable you created.
-
-```javascript:title=gatsby-config.js
-require("dotenv").config()
+2. Add the plugin to your `gatsby-config.js`:
 
+```js:title=gatsby-config.js
 module.exports = {
   plugins: [
     {
-      resolve: "gatsby-plugin-web-font-loader",
+      resolve: `gatsby-omni-font-loader`,
       options: {
-        typekit: {
-          id: process.env.TYPEKIT_ID,
-        },
+        enableListener: true,
+        preconnect: [`https://fonts.googleapis.com`, `https://fonts.gstatic.com`],
+        web: [
+          {
+            name: `Open Sans`,
+            file: `https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap`,
+          },
+        ],
       },
     },
-  ],
+  ]
 }
 ```
 
-Next, add the typeface name to the appropriate `font-family` value in your CSS.
+3. You can now reference the font in your CSS:
 
-```css:title=src/components/layout.css
+```css:title=your-styles.css
 body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: "Futura", georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
+  font-family: "Open Sans";
 }
 ```
 
-### Self-host Google Fonts with Fontsource
+## Self-host Google Fonts with Fontsource
 
 [Fontsource](https://github.com/fontsource/fontsource) is a project to provide open source fonts from Google Fonts as NPM Packages.
 
@@ -83,27 +61,22 @@ This example shows how to install the [Open Sans](https://fonts.google.com/speci
 2. Then within your app entry file or site component, import the font package. It is recommended you import in your site's gatsby-browser.js file.
 
 ```jsx:title=gatsby-browser.js
-import "@fontsource/open-sans" // Defaults to weight 400 with all styles included.
+import "@fontsource/open-sans" // Defaults to weight 400 with normal variant.
 ```
 
 If you wish to select a particular weight or style, you may specify it by changing the import path.
 
 ```jsx:title=gatsby-browser.js
-import "@fontsource/open-sans/500.css" // Weight 500 with all styles included.
+import "@fontsource/open-sans/500.css" // Weight 500.
 import "@fontsource/open-sans/900-normal.css" // Select either normal or italic.
 ```
 
-**Note**: The weights and styles a font includes is shown in each package's README file.
+**Please note**: The weights and styles a font includes is shown in each package's `README` file.
 
 3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
-```css:title=src/components/layout.css
+```css:title=your-styles.css
 body {
   font-family: "Open Sans";
 }
 ```
-
-## Other resources
-
-- Check out the [Using Google Fonts](/docs/recipes/styling-css/#using-google-fonts) Gatsby recipe.
-- Here's a great article on why it's important to [keep your environment variables secret](https://medium.com/codait/environment-variables-or-keeping-your-secrets-secret-in-a-node-js-app-99019dfff716).