Advantage over directly using it #8

deadcoder0904 · 2020-07-05T06:55:08Z

I can't understand the advantage of this package over directly using what Next JS offers. I mean I can do it like the following:

_document.tsx

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="preload"
            href="/fonts/Neoneon.otf"
            as="font"
            crossOrigin=""
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

_app.tsx

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { mdComponents } from '../components/mdx'
import { AppProps } from 'next/app'

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <MDXProvider components={mdComponents}>
      <Component {...pageProps} />
      <style jsx global>{`
        @font-face {
          font-family: 'Neoneon';
          src: url('/fonts/Neoneon.otf');
          font-weight: bold;
          font-style: normal;
          font-display: swap;
        }
      `}</style>
    </MDXProvider>
  )
}

export default MyApp

index.tsx

import Link from 'next/link'

const IndexPage = () => (
  <>
    <h1>Akshay Kadam</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
    <style jsx>{`
      h1 {
        font-family: 'Neoneon';
      }
    `}</style>
  </>
)

export default IndexPage

So what does this package offers differently?

rohanray · 2020-07-30T18:56:13Z

Please refer rohanray/next-fonts#34

deadcoder0904 · 2020-07-31T06:27:14Z

Makes sense :)

EricVanDerDijs · 2020-11-28T21:04:24Z

Hi @rohanray , I found out that this package (alongside with next-images) is the best way to go if you intend to use react-native-web on nextjs without adding expo to your project. This is because (at least in my case) a broadly used library for RN (react-native-vector-icons) which is the peer dependency of several UI libraries requires you to import their .ttf files to your next Head component to decalre the font-icon used by the UI components.

Also if you are using Typescript you will need to add type definitions for your font files on your next-env.d.ts file like this:

./path/to/my/types/next-fonts.d.ts

declare module "*.ttf" {
  const value: string;
  export = value;
}

next-env.d.ts (add the following line)

/// <reference types="./path/to/my/types/next-fonts" />

My previous workaround was to copy the file from node_modules to my public folder and add that script to package.json posinstall and before run dev and build, which seemed to me kind of hacky.

If I knew this earlier it would have saved me a lot of time

rohanray closed this as completed Jul 30, 2020

deadcoder0904 mentioned this issue Jul 31, 2020

Is this package necessary in current Next? rohanray/next-fonts#34

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Advantage over directly using it #8

Advantage over directly using it #8

deadcoder0904 commented Jul 5, 2020

rohanray commented Jul 30, 2020

deadcoder0904 commented Jul 31, 2020

EricVanDerDijs commented Nov 28, 2020 •

edited

Loading

Advantage over directly using it #8

Advantage over directly using it #8

Comments

deadcoder0904 commented Jul 5, 2020

_document.tsx

_app.tsx

index.tsx

rohanray commented Jul 30, 2020

deadcoder0904 commented Jul 31, 2020

EricVanDerDijs commented Nov 28, 2020 • edited Loading

EricVanDerDijs commented Nov 28, 2020 •

edited

Loading