Local font only loads one font

Question

I want to load local font 'Franie' but when i load it I can only use bold font 700 and can't switch to nothing else. Font file is correct and contains all weights.

Nextjs code:

import type { Metadata } from 'next';
import localFont from 'next/font/local';
import './globals.css';

const franie = localFont({
  src: './FranieVF.woff2',
  display: 'swap',
});

export const metadata: Metadata = {
  title: 'Websites21',
  description: 'Websites21',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body className={franie.className}>{children}</body>
    </html>
  );
}

CSS code

&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;

Tailwind code

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

Local font only loads one font

0 Replies