Using Google Fonts with Next.js (typescript)

To add a google font to an Next.js application, create a Custom Document ( _document.tsx in the pages folder), and copy from google fonts

// pages/_document.tsx
import Document, {
DocumentContext,
DocumentInitialProps,
Html,
Head,…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Cheryl M

To add a google font to an Next.js application, create a Custom Document ( _document.tsx in the pages folder), and copy from google fonts

image.png

// pages/_document.tsx
import Document, {
    DocumentContext,
    DocumentInitialProps,
    Html,
    Head,
    Main,
    NextScript
} from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(
        ctx: DocumentContext
    ): Promise<DocumentInitialProps> {
        const initialProps = await Document.getInitialProps(ctx)

        return initialProps
    }

    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.googleapis.com"/>
                    <link rel="preconnect" href="https://fonts.gstatic.com"/>
                    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet"/>
                </Head>
                <body>
                <Main/>
                <NextScript/>
                </body>
            </Html>
        )
    }
}

export default MyDocument

Finally, apply this CSS rule

image.png


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Cheryl M


Print Share Comment Cite Upload Translate Updates
APA

Cheryl M | Sciencx (2022-11-08T02:32:53+00:00) Using Google Fonts with Next.js (typescript). Retrieved from https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/

MLA
" » Using Google Fonts with Next.js (typescript)." Cheryl M | Sciencx - Tuesday November 8, 2022, https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/
HARVARD
Cheryl M | Sciencx Tuesday November 8, 2022 » Using Google Fonts with Next.js (typescript)., viewed ,<https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/>
VANCOUVER
Cheryl M | Sciencx - » Using Google Fonts with Next.js (typescript). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/
CHICAGO
" » Using Google Fonts with Next.js (typescript)." Cheryl M | Sciencx - Accessed . https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/
IEEE
" » Using Google Fonts with Next.js (typescript)." Cheryl M | Sciencx [Online]. Available: https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/. [Accessed: ]
rf:citation
» Using Google Fonts with Next.js (typescript) | Cheryl M | Sciencx | https://www.scien.cx/2022/11/08/using-google-fonts-with-next-js-typescript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts