Use Font Optimization in examples (#39977)

Some examples don't the use the builtin [font-optimization](https://nextjs.org/docs/basic-features/font-optimization) and instead use an `@import` in its CSS.
vercel · Aug 26, 2022 · 27a519b · 27a519b
1 parent 2407ab2
commit 27a519b
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 12 deletions.
diff --git a/examples/with-clerk/pages/_document.js b/examples/with-clerk/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-clerk/styles/globals.css b/examples/with-clerk/styles/globals.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
-
 html,
 body {
   font-family: 'Source Sans Pro', sans-serif;

diff --git a/examples/with-deta-base/pages/_document.js b/examples/with-deta-base/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-deta-base/pages/index.js b/examples/with-deta-base/pages/index.js
@@ -75,10 +75,6 @@ export default function Home() {
       <Head>
         <title>deta + next.js</title>
         <link rel="icon" href="/favicon.ico" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
-          rel="stylesheet"
-        />
       </Head>
       <header className={styles.header}>
         <h2>

diff --git a/examples/with-gsap/App.scss b/examples/with-gsap/App.scss
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap');
-
 .header {
   width: 100%;
   display: flex;

diff --git a/examples/with-gsap/pages/_document.js b/examples/with-gsap/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-mongodb-mongoose/css/style.css b/examples/with-mongodb-mongoose/css/style.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
-
 * {
   font-family: 'Open Sans', sans-serif;
   box-sizing: border-box;

diff --git a/examples/with-mongodb-mongoose/pages/_document.js b/examples/with-mongodb-mongoose/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-react-hook-form/pages/_document.js b/examples/with-react-hook-form/pages/_document.js
@@ -0,0 +1,18 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/with-react-hook-form/styles/global.css b/examples/with-react-hook-form/styles/global.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-
 :root {
   --white: #fff;
   --light-border: #ccc;