Skip to content

Instantly share code, notes, and snippets.

@mortegac

mortegac/GlobalStyle.js

Created July 8, 2022 19:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mortegac/ac7c0028cc9db52a5787617ad35d9ad5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mortegac/ac7c0028cc9db52a5787617ad35d9ad5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mortegac created this gist Jul 8, 2022.
    25 changes: 25 additions & 0 deletions GlobalStyle.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@


    import { createGlobalStyle } from "styled-components";

    // OPCION : Agregar el archivo fisico de la font
    // import RobotoWoff from "./fonts/roboto-condensed-v19-latin-regular.woff";


    // export const GlobalStyle = createGlobalStyle`
    // @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap');
    // body {
    // font-family: 'Poppins', sans-serif;
    // margin: 0;
    // padding: 0;
    // box-sizing: border-box;
    // }
    // `;


    // OPCION A: Usar font face para agregar la font
    // @font-face {
    // font-family: 'Roboto Condensed';
    // src: url(${RobotoWoff2}) format('woff2'),
    // url(${RobotoWoff}) format('woff');
    // }
    47 changes: 47 additions & 0 deletions _document.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    import Document, { Html, Head, Main, NextScript } from "next/document";
    import { ServerStyleSheet } from "styled-components";

    //Dont Touch!

    export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
    ctx.renderPage = () =>
    originalRenderPage({
    enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
    });

    const initialProps = await Document.getInitialProps(ctx);
    return {
    ...initialProps,
    styles: (
    <>
    {initialProps.styles}
    {sheet.getStyleElement()}
    </>
    ),
    };
    } finally {
    sheet.seal();
    }
    }
    render() {
    return (
    <Html>
    <Head>
    <link
    href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap"
    rel="stylesheet"
    />
    </Head>
    <body>
    <Main />
    <NextScript />
    </body>
    </Html>
    )
    }
    }