Typo in AcmeLogo example: fonts should be font #1334

Before submitting

• I have searched existing issues to make sure this isn't a duplicate
• I have completed this chapter and encountered the issue myself

Chapter URL

https://nextjs.org/learn/dashboard-app/optimizing-fonts-images

Issue Type

Typo or grammatical error

Description

The AcmeLogo example currently imports lusitana using:

import { lusitana } from '@/app/ui/fonts';

However, the file in the project is app/ui/font.ts, so the import should be:

import { lusitana } from '@/app/ui/font';

The current import causes the following error:

Module not found: Can't resolve '@/app/ui/fonts'

Could you please update the import path from font to fonts? Actually, the example should reference app/ui/font to match the existing file.

Expected vs Actual Behavior

Expected:

import { lusitana } from '@/app/ui/font';

Actual:

import { lusitana } from '@/app/ui/fonts';

The extra s in fonts causes the module resolution error.

Environment (optional)

No response

Screenshots (optional)

No response