diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index ef6e145dcd..807f7070a3 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -62,7 +62,6 @@ headerLinks: [
 
 ### Optional Fields
 
-`fonts` - Font-family css configuration for the site. If a font family specified as `$myFont`, then adding a `myFont` key to an array in `fonts` will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so these should be more specific. 
 `customDocsPath` - By default, Docusaurus expects your documentation to be in a directory called `docs`. This directory is at the same level as the `website` directory (i.e., not inside the `website` directory). You can specify a custom path to your documentation with this field. **Note that all of your documentation *.md files must still reside in a flat hierarchy. You cannot have your documents in nested directories**.
 
 ```js
@@ -72,6 +71,32 @@ customDocsPath: "docs/site"
 ```js
 customDocsPath: "website-docs"
 ```
+
+`fonts` - Font-family css configuration for the site. If a font family is specified in `siteConfig.js` as `$myFont`, then adding a `myFont` key to an array in `fonts` will allow you to configure the font. Items appearing earlier in the array will take priority of later elements, so ordering of the fonts matter.
+
+In the below example, we have two sets of font configurations, `myFont` and `myOtherFont`. `Times New Roman` is the preferred font in `myFont`. `-apple-system` is the preferred in `myOtherFont`.
+
+```
+fonts: {
+  myFont: [
+    "Times New Roman",
+    "Serif"
+  ],
+  myOtherFont: [
+    "-apple-system",
+    "system-ui"
+  ]
+},
+```
+
+The above fonts would be represented in your CSS file(s) as variables `$myFont` and `$myOtherFont`.
+
+```
+h1 {
+  font-family: $myFont;
+}
+```
+
 `useEnglishUrl` - If you do not have [translations](guides-translation.md) enabled (e.g., by having a `languages.js` file), but still want a link of the form `/docs/en/doc.html` (with the `en`), set this to `true`.
 
 `organizationName` - GitHub username of the organization or user hosting this project. This is used by the publishing script to determine where your GitHub pages website will be hosted.
diff --git a/examples/basics/siteConfig.js b/examples/basics/siteConfig.js
index 5c29ab9a94..eb415cb60c 100644
--- a/examples/basics/siteConfig.js
+++ b/examples/basics/siteConfig.js
@@ -37,6 +37,17 @@ const siteConfig = {
     primaryColor: '#2E8555',
     secondaryColor: '#205C3B',
   },
+  /* custom fonts for website */
+  /*fonts: {
+    myFont: [
+      "Times New Roman",
+      "Serif"
+    ],
+    myOtherFont: [
+      "-apple-system",
+      "system-ui"
+    ]
+  },*/
   // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
   copyright:
     'Copyright © ' +