added new font

CRUSH.md

@@ -0,0 +1,47 @@
+# CRUSH.md - Healthy Oil Project Guide
+
+## Development Commands
+- `npm run dev` - Start development server on port 3000
+- `npm run build` - Build for production (`tsc -b && vite build`)
+- `npm run lint` - Run ESLint on entire codebase
+- `npm run preview` - Preview production build on port 3000
+
+## Code Style Guidelines
+
+### File Naming & Structure
+- Components: lowercase filenames (header.tsx, hero1.tsx, oil_info.tsx)
+- UI components: `/src/components/ui/` directory
+- Use function declarations for components, not arrow functions
+
+### Import Conventions
+```typescript
+// Chakra UI imports (named, grouped)
+import { Box, Flex, Image } from '@chakra-ui/react';
+
+// Local imports (default preferred)
+import Header from './components/header';
+```
+
+### Component Pattern
+```typescript
+function ComponentName() {
+    return (
+        <Box>
+            {/* JSX content */}
+        </Box>
+    );
+}
+
+export default ComponentName;
+```
+
+### TypeScript & Configuration
+- Strict mode enabled with `noUnusedLocals`, `noUnusedParameters`
+- Path aliases available: `@/*` → `./src/*`
+- Use Chakra UI props for responsive design
+- Framer Motion for animations (`motion()` wrapper pattern)
+
+### Styling Approach
+- Primary: Chakra UI props and components
+- External: colors.tsx for color system, fonts.css for typography
+- Responsive: `useBreakpointValue()` hook for breakpoints

src/index.css

@@ -106,6 +106,16 @@
   font-display: swap;
 }
 
+/* NotoSerif Font Family */
+@font-face {
+  font-family: 'NotoSerif';
+  src: url('/fonts/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: italic;
+  font-stretch: 62.5% 100%;
+  font-display: swap;
+}
+
 :root {
   font-family: 'NotoSansCJKtc', 'MElleHK', system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;