diff --git a/packages/nextra-theme-docs/src/index.js b/packages/nextra-theme-docs/src/index.js
index da8a0f16d7..69467df37d 100644
--- a/packages/nextra-theme-docs/src/index.js
+++ b/packages/nextra-theme-docs/src/index.js
@@ -214,11 +214,12 @@ const Layout = ({ filename, config: _config, pageMap, meta, children }) => {
   return (
     <React.Fragment>
       <Head>
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        {config.font ? <link rel="stylesheet" href="https://rsms.me/inter/inter.css" /> : null}
         <title>
           {title}
           {renderComponent(config.titleSuffix, { locale })}
         </title>
+        {config.font ? <style dangerouslySetInnerHTML={{__html: `html{font-family:Inter,sans-serif}@supports(font-variation-settings:normal){html{font-family:'Inter var',sans-serif}}`}}/> : null}
         {renderComponent(config.head, { locale })}
       </Head>
       <div
diff --git a/packages/nextra-theme-docs/src/misc/default.config.js b/packages/nextra-theme-docs/src/misc/default.config.js
index d78d6a567d..583c2bc395 100644
--- a/packages/nextra-theme-docs/src/misc/default.config.js
+++ b/packages/nextra-theme-docs/src/misc/default.config.js
@@ -10,6 +10,7 @@ export default {
   prevLinks: true,
   search: true,
   darkMode: true,
+  font: true,
   footer: true,
   footerText: 'MIT 2020 © Nextra.',
   footerEditOnGitHubLink: true,
diff --git a/packages/nextra-theme-docs/src/styles.css b/packages/nextra-theme-docs/src/styles.css
index 6014c77364..4a136273b0 100644
--- a/packages/nextra-theme-docs/src/styles.css
+++ b/packages/nextra-theme-docs/src/styles.css
@@ -1,10 +1,5 @@
 @tailwind base;
 
-html { font-family: 'Inter', sans-serif; }
-@supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
-}
-
 html {
   @apply subpixel-antialiased;
   font-size: 16px;
