Next.js Discord

Discord Forum

Local fonts importing

Unanswered
European hornet posted this in #help-forum
Open in Discord
European hornetOP
Whem i try this,

import {
cocogooseDefault,
cocosharpDefault
} from '@/core/utils/defaultFonts/index'

import localFont from 'next/font/local'
import { defaultMeta } from '@/core/utils/defaultMeta'

export const metadata: Metadata = { ...defaultMeta }

export const openSans = OpenSans({
subsets: ['latin'],
variable: '--font-opensans',
display: 'swap',
})
export const workSans = WorkSans({
subsets: ['latin'],
variable: '--font-worksans',
display: 'swap',
})
const inter = Inter({ subsets: ['latin'] })

export const cocogoose = localFont(cocogooseDefault)
// export const cocogoose = localFont({
// variable: '--font-cocogoose',
// src: [
// {
// path: './fonts/cocogoose/cocogoose-pro-trial.ttf',
// weight: 'normal',
// style: 'normal',
// },
// ],
// })


is not possible to import from another archive

/defaultFonts/index.ts
export * from './cocogoose';
export * from './cocosharp';

/defaultFonts/cocogoose/index.ts
export const cocogooseDefault: any = {
variable: '--font-cocogoose',
src: [
{
path: './fonts/cocogoose/cocogoose-pro-trial.ttf',
weight: 'normal',
style: 'normal',
},
],
}

× Font loader values must be explicitly written literals.

19 Replies

Marchy
I see your font loaders, but where are you applying the classname? It's not clear from the code provided what the issue is or what you're trying to solve
European hornetOP
@Marchy

/layout.tsx
import { LoggedUserProvider } from '@/core/contexts/loggedUser'
import './globals.css'
import type { Metadata } from 'next'

import {
  Inter,
  Open_Sans as OpenSans,
  Work_Sans as WorkSans
} from 'next/font/google'

import {
  cocogooseDefault,
  cocosharpDefault
} from '@/core/utils/defaultFonts/index'

// import { cocogooseDefault } from '@/core/utils/defaultFonts/cocogoose'

import localFont from 'next/font/local'
import { defaultMeta } from '@/core/utils/defaultMeta'

export const metadata: Metadata = { ...defaultMeta }

export const openSans = OpenSans({
  subsets: ['latin'],
  variable: '--font-opensans',
  display: 'swap',
})

export const workSans = WorkSans({
  subsets: ['latin'],
  variable: '--font-worksans',
  display: 'swap',
})

const inter = Inter({ subsets: ['latin'] })

export const cocogoose = localFont(cocogooseDefault)
export const cocosharp = localFont(cocosharpDefault)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`
        ${inter.className}
        ${openSans.variable}
        ${workSans.variable}
        ${cocogoose.className}
        ${cocosharp.className}
      `}>
        <LoggedUserProvider >
          {children}
        </LoggedUserProvider>
      </body>
    </html>
  )
}
/src/core/util/defaultFonts/index.ts

export * from './cocogoose';
export * from './cocosharp';
/src/core/util/defaultFonts/cocogoose/index.ts

export const cocogooseDefault = {
  variable: '--font-cocogoose' as `--${string}`,
  src: [
    {
      path: `./fonts/cocogoose/cocogoose-pro-trial.ttf`,
      weight: `normal`,
      style: `normal`,
    },
  ],
}
if out change "'--font-cocogoose' as --${string}" to '--font-cocogoose`
you get the same
Marchy
Ah, I think the issue is here
export const cocogoose = localFont(cocogooseDefault)


Could you try defining the font like this instead?
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})


I don't believe next allows dynamically importing values there for security reasons
European hornetOP
export const cocogoose = localFont({
variable: '--font-cocogoose' as --${string},
src: [
{
path: './fonts/cocogoose/cocogoose-pro-trial.ttf',
weight: 'normal',
style: 'normal',
},
],
})
inside layout if you put in a paramiter, works
European hornetOP
import { LoggedUserProvider } from '@/core/contexts/loggedUser'
import './globals.css'
import type { Metadata } from 'next'

import {
  Inter,
  Open_Sans as OpenSans,
  Work_Sans as WorkSans
} from 'next/font/google'

import {
  cocosharpDefault
} from '@/core/utils/defaultFonts/index'

// import { cocogooseDefault } from '@/core/utils/defaultFonts/cocogoose'

import localFont from 'next/font/local'
import { defaultMeta } from '@/core/utils/defaultMeta'

export const metadata: Metadata = { ...defaultMeta }

export const openSans = OpenSans({
  subsets: ['latin'],
  variable: '--font-opensans',
  display: 'swap',
})

export const workSans = WorkSans({
  subsets: ['latin'],
  variable: '--font-worksans',
  display: 'swap',
})

const inter = Inter({ subsets: ['latin'] })

export const cocogoose = localFont({
  variable: '--font-cocogoose' as `--${string}`,
  src: [
    {
      path: './fonts/cocogoose/cocogoose-pro-trial.ttf',
      weight: 'normal',
      style: 'normal',
    },
  ],
})

export const cocosharp = localFont(cocosharpDefault)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`
        ${inter.className}
        ${cocogoose.className}
        ${cocosharp.className}
        ${openSans.variable}
        ${workSans.variable}
      `}>
        <LoggedUserProvider >
          {children}
        </LoggedUserProvider>
      </body>
    </html>
  )
}
yes
in this example cocogoose work
cocoshap no
I was hoping to move it to another file to be more organized
@European hornet I was hoping to move it to another file to be more organized
Marchy
You can, you just can't use imported values in localFont
European hornetOP
Is it possible in another way?
@European hornet Is it possible in another way?
Marchy
Not really, but fonts you only have to define once