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.
This commit is contained in:
parent
2407ab22b9
commit
27a519ba53
10 changed files with 90 additions and 12 deletions
18
examples/with-clerk/pages/_document.js
Normal file
18
examples/with-clerk/pages/_document.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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;
|
||||
|
|
18
examples/with-deta-base/pages/_document.js
Normal file
18
examples/with-deta-base/pages/_document.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Poppins:300,400&display=swap');
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
18
examples/with-gsap/pages/_document.js
Normal file
18
examples/with-gsap/pages/_document.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -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;
|
||||
|
|
18
examples/with-mongodb-mongoose/pages/_document.js
Normal file
18
examples/with-mongodb-mongoose/pages/_document.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
18
examples/with-react-hook-form/pages/_document.js
Normal file
18
examples/with-react-hook-form/pages/_document.js
Normal file
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -1,5 +1,3 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
|
||||
|
||||
:root {
|
||||
--white: #fff;
|
||||
--light-border: #ccc;
|
||||
|
|
Loading…
Reference in a new issue