diff --git a/README.md b/README.md index 49b7716..066adcf 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,33 @@ import { FaPlay } from "react-icons/fa"; ``` +## Fonts +Fonts are managed in the file `/app/ui/fonts.ts`. Next.js is be default able to import fonts from Google Fonts. After importing a font the subset has to be defined. In my case its the latin subset. +```ts +import { Inter } from 'next/font/google'; +export const inter = Inter({subsets: ['latin'], weight: ['400', '700']}); +``` + +Afterwards the font can be added to the `layout.tsx` so its visible all over the application. +There also a `className` has to be added to the body, so that the font will be rendered. +```tsx +import {inter} from '@/app/ui/fonts'; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} +``` + +The same way other fonts can be imported and also just applied on single objects. + ## Ressources - [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation) - [Next.js React Foundations Course](https://nextjs.org/learn/react-foundations) diff --git a/dashboard-app-course/app/layout.tsx b/dashboard-app-course/app/layout.tsx index 225b603..fdb0c63 100644 --- a/dashboard-app-course/app/layout.tsx +++ b/dashboard-app-course/app/layout.tsx @@ -1,3 +1,6 @@ +import '@/app/ui/global.css'; +import {inter} from '@/app/ui/fonts'; + export default function RootLayout({ children, }: { @@ -5,7 +8,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/dashboard-app-course/app/page.tsx b/dashboard-app-course/app/page.tsx index 8e0184f..1591b29 100644 --- a/dashboard-app-course/app/page.tsx +++ b/dashboard-app-course/app/page.tsx @@ -1,16 +1,18 @@ import AcmeLogo from '@/app/ui/acme-logo'; import { ArrowRightIcon } from '@heroicons/react/24/outline'; import Link from 'next/link'; +import { lusitana } from '@/app/ui/fonts'; export default function Page() { return (
- {/* */} + {}
-

+

+

Welcome to Acme. This is the example for the{' '} Next.js Learn Course diff --git a/dashboard-app-course/app/ui/fonts.ts b/dashboard-app-course/app/ui/fonts.ts new file mode 100644 index 0000000..8898efb --- /dev/null +++ b/dashboard-app-course/app/ui/fonts.ts @@ -0,0 +1,4 @@ +import { Inter, Lusitana } from 'next/font/google'; + +export const inter = Inter({subsets: ['latin']}); +export const lusitana = Lusitana({subsets: ['latin'], weight: ['400', '700']}); \ No newline at end of file