feat: custom fonts (#255)

* Update global.mdx

* Update global.mdx

* Update global.mdx

* Update global.mdx

* add details

* remove space

---------

Co-authored-by: Hahnbee Lee <[email protected]>

Author: rickyzhangca

settings/global.mdx

@@ -91,6 +91,35 @@ settings. Learn more about the [properties](#properties) or from an
   Set a custom background image to be displayed behind every page.
 </ResponseField>
 
+<ResponseField
+  name="font"
+  type={
+    "FontDetailsType | { headings?: FontDetailsType, body?: FontDetailsType }"
+  }
+>
+  Custom fonts. Apply globally or set different fonts for headings and the body
+  text.
+  <Expandable title="FontDetailsType">
+    <ResponseField name="family" type="string" required>
+      The font family name. Custom fonts and all [Google
+      Fonts](https://fonts.google.com/) are supported. e.g. "Open Sans",
+      "Playfair Display"
+    </ResponseField>
+    <ResponseField name="weight" type="number">
+      The font weight. Precise values such as `560` are also supported for
+      variable fonts. Check under the Styles section for your Google Font for
+      the available weights.
+    </ResponseField>
+    <ResponseField name="url" type="string">
+      The URL to the font file. Can be used to specify a font that is not from
+      Google Fonts.
+    </ResponseField>
+    <ResponseField name="format" type="'woff' | 'woff2">
+      The font format. Required if using a custom font source (`url`).
+    </ResponseField>
+  </Expandable>
+</ResponseField>
+
 <ResponseField name="modeToggle" type="ModeToggle">
   Customize the dark mode toggle.
   <Expandable title="ModeToggle">
@@ -100,7 +129,6 @@ settings. Learn more about the [properties](#properties) or from an
     </ResponseField>
     <ResponseField name="isHidden" type="boolean" default={false}>
       Set to true to hide the dark/light mode toggle. You can combine `isHidden` with `default` to force your docs to only use light or dark mode. For example:
-      
       <CodeGroup>
 
 ```json Only Dark Mode