Use SF Pro style font stack

2026-05-16 21:52:38 +01:00
parent 0ac37261a8
commit 6549b03d9a
4 changed files with 6 additions and 5 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ All notable changes to the New Optic website will be documented in this file.

 ### Changed

+- Switched the latin typography to an SF Pro-style system font stack for a more Apple-like feel.
 - Removed the desktop liquid glass WebGL layer from navbar and CTA controls so text remains readable and glass surfaces do not show dark rendering artifacts while scrolling.
 - Replaced the mobile hamburger dropdown with a fast, solid menu animation without bounce or stretch effects.
 - Kept the language switcher visible in the mobile top navigation bar.
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,6 +6,7 @@
  color-scheme: light;
  --bg: #f6f5f2;
  --ink: #111317;
+  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }

 * {
@@ -24,7 +25,7 @@ body {
    url('/assets/New-optic-BG-mobile.webp') center top / cover scroll,
    linear-gradient(180deg, #fbfaf8 0%, #f6f5f2 42%, #ffffff 100%);
  color: var(--ink);
-  font-family: var(--font-sans), system-ui, sans-serif;
+  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,9 @@
 import type { Metadata } from "next";
-import { Inter, Noto_Kufi_Arabic } from "next/font/google";
+import { Noto_Kufi_Arabic } from "next/font/google";
 import "./globals.css";
 import { business } from "@/config/business";
 import { fr } from "@/messages/fr";

-const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap" });
 const arabic = Noto_Kufi_Arabic({ subsets: ["arabic"], variable: "--font-arabic", display: "swap" });

 export const metadata: Metadata = {
@@ -28,7 +27,7 @@ export const metadata: Metadata = {

 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
-    <html lang="fr" className={`${inter.variable} ${arabic.variable} scroll-smooth`}>
+    <html lang="fr" className={`${arabic.variable} scroll-smooth`}>
      <body>
        {children}
      </body>
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,7 +11,7 @@ const config: Config = {
        optical: "#315f8f"
      },
      fontFamily: {
-        sans: ["var(--font-sans)", "Inter", "system-ui", "sans-serif"],
+        sans: ["var(--font-sans)"],
        arabic: ["var(--font-arabic)", "system-ui", "sans-serif"]
      },
      boxShadow: {