From 3ba540fb87f554ec42551371077555e1ab628857 Mon Sep 17 00:00:00 2001 From: michivonah Date: Sat, 19 Apr 2025 10:56:29 +0200 Subject: [PATCH] styling, fonts & take notes --- README.md | 27 +++++++++++++++++++++++++++ dashboard-app-course/app/layout.tsx | 5 ++++- dashboard-app-course/app/page.tsx | 6 ++++-- dashboard-app-course/app/ui/fonts.ts | 4 ++++ 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 dashboard-app-course/app/ui/fonts.ts 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 (
- {/* */} + {}
-

+