next-fonts with styled components not working on safari

I added .otf font and its working on Google chrome but not on safari.

package.json

package.json:
     "dependencies": {
     "@zeit/next-css": "^1.0.1",
     "next": "9.5.2",
      "next-fonts": "^1.4.0",
      "null-loader": "^4.0.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "styled-components": "^5.1.1"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "1.10.2"
  }

next.config.js is the same as that in the repository

_app.js

 _app.js:
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'ProximaNova';
      src: url('/static/fonts/ProximaNova-Regular.otf');
      src: url('/static/fonts/ProximaNova-Bold.otf');
      font-display: auto;
  }
  p {
    font-family: 'ProximaNova';
  }
`;

function MyApp({ Component, pageProps }) {
  return  (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  );
};

export default MyApp

index.js

import Head from 'next/head'
import styled from  'styled-components';
export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Hello>Hello</Hello>
      </main>
    </div>
  )
}
const Hello = styled.p`
  font-family: ProximaNova-Regular;
  font-size: 40px;
  color: green;
`;

Results :

Google Chrome

Safari

PS: I by mistakenly created this issue in examples admin might. want to delete it from there

Solved:

Change _document.js to this

import Document, {Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

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 lang="en">
            <Head>
                <link
                  rel="preload"
                  href="/fonts/ProximaNova-Bold.woff"
                  as="font"
                  type="font/woff"
                  crossOrigin=""
                />
                <link
                  rel="preload"
                  href="/fonts/ProximaNova-Regular.woff"
                  as="font"
                  type="font/woff"
                  crossOrigin=""
                />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}
}

Also take care while using font-face inside createGlobalStyles. Make sure your font-family name is different

Changed _app.js file:

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    @font-face {
    font-family: 'ProximaNova-Regular';
    src: url('/fonts/ProximaNova-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'ProximaNova-Bold';
    src: url('/fonts/ProximaNova-Bold.woff') format('woff');
    font-style: bold;
    font-weight: 700;
    font-display: swap;
  }
`;

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp

pay close look at the font-family property you should use the same for example "fontFamily-style" and use the same format while using it for styling inside any styled component.

rohanray / next-fonts

next-fonts with styled components not working on safari #36