🅰️ פונט (Google Fonts)

אפשר לשנות את הפונט באתר בעזרת Google Fonts. נכנסים לאתר, בוחרים פונט (כולל תתי-משקלים/עברית), ומחברים אותו לפרויקט.

Google Fonts Screenshot

1- בחירת פונט

היכנס ל־Google Fonts, חפש פונט בעברית (למשל: Rubik, Heebo, Assistant), בחר משקלים (Regular, Bold וכו׳), והעתק את קטעי הקוד שהאתר נותן.

2- שיטה א׳ – קישור link ל-HTML

הדבק את התג הזה בתוך ה־<head> של הדף:

<!-- דוגמה לפונט Rubik עם עברית -->
<link
  rel="preconnect"
  href="https://fonts.googleapis.com"
/>
<link
  rel="preconnect"
  href="https://fonts.gstatic.com"
  crossOrigin="anonymous"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap"
  rel="stylesheet"
/>

ואז בקובץ ה־CSS שלך:

/* שימוש בפונט */
body {
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

h1, h2, h3 {
  font-family: "Rubik", system-ui, sans-serif;
}

3- שיטה ב׳ – @import ב-CSS

אפשר להדביק בתחילת קובץ ה־CSS הראשי (למשל: globals.css):

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");

ואז אותו שימוש כמו קודם עם font-family.

4- (מומלץ ב-Next.js) – next/font/google

השיטה הנקייה והמהירה ב-Next.js – בלי טעינות חיצוניות ולא מושפעת מחוסמי פרסומות. מגדירים פעם אחת בלייאאוט:

// app/layout.tsx או app/layout.jsx
import "./globals.css";
import { Rubik } from "next/font/google";

const rubik = Rubik({
  subsets: ["hebrew"],   // חשוב לעברית
  weight: ["400", "700"],
  display: "swap",
});

export default function RootLayout({ children }) {
  return (
    <html lang="he">
      <body className={rubik.className}>
        {children}
      </body>
    </html>
  );
}

מכאן ואילך כל האתר יורש את הפונט. אם תרצה לשלב כמה פונטים, תוכל ליצור מופעים נוספים (למשל Heebo) ולהשתמש ב־variable + Tailwind או במחלקות מותאמות.

5- איפה לשנות את הפונט בפועל

  • ברמת כל האתר: הוסף את הפונט ל־body (כמו בדוגמאות למעלה).
  • רכיב/אזור ספציפי: צור מחלקה והחל אותה רק על אותו אלמנט:
    .title {
  font-family: "Rubik", system-ui, sans-serif;
}
  • Tailwind (אופציונלי): הוסף ל־tailwind.config.js:
    // tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        rubik: ['"Rubik"', "system-ui", "sans-serif"],
      },
    },
  },
};
    ואז בשימוש:
    <h1 className="font-rubik text-2xl">כותרת בפונט Rubik</h1>

✅ מומלץ להשתמש ב־display=swap כדי למנוע הבהוב בפונט בטעינה ראשונה, ולכלול תמיד גיבוי ב־font-family (למשל system-ui, Arial).