מדריך להטמעה ושימוש ב Google Fonts באתר

מדריך להטמעה ושימוש ב Google Fonts באתר

היום נדבר על איך להטמיע Google Fonts באתר שלכם, בין אם אתם עובדים עם HTML רגיל, React, Vue, או Angular. הטמעת פונטים מהירה ופשוטה יכולה לשדרג את העיצוב של האתר ולהפוך אותו לאטרקטיבי יותר למשתמשים. בנוסף, נדבר גם על איך לבצע זאת בצורה אופטימלית מבחינת SEO.

HTML רגיל

הטמעת Google Fonts באתר HTML רגיל היא קלה ופשוטה. בואו נראה איך עושים את זה:

שלב 1: בחירת הפונט

  1. גשו לאתר Google Fonts.
  2. בחרו את הפונט הרצוי ולחצו על כפתור ה- "+".

שלב 2: קישור הפונט בקובץ HTML

  1. לאחר בחירת הפונט, העתיקו את קוד ה- <link> שמופיע.
  2. הדביקו את הקוד בתוך תגית <head> בקובץ ה- HTML שלכם.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</head>
<body>
    <h1 style="font-family: 'Roboto', sans-serif;">Hello, world!</h1>
</body>
</html>

הטמעת Google Font באפליקציית React

הטמעת Google Fonts ב-React מצריכה גישה מעט שונה.

שלב 1: התקנת חבילות

התקינו את החבילה @fontsource עבור הפונט שבחרתם.

npm install @fontsource/roboto

שלב 2: ייבוא הפונט בקובץ ה-JavaScript

import '@fontsource/roboto'; // Import the font

function App() {
    return (
        <div style={{ fontFamily: 'Roboto, sans-serif' }}>
            <h1>Hello, world!</h1>
        </div>
    );
}

export default App;

הטמעת Google Font באפליקציה של Vue

ב-Vue, הטמעת Google Fonts דומה לשיטה ב-React.

שלב 1: התקנת חבילות

npm install @fontsource/roboto

שלב 2: ייבוא הפונט בקובץ ה-JavaScript

import '@fontsource/roboto';

export default {
  name: 'App',
  template: `
    <div :style="{ fontFamily: 'Roboto, sans-serif' }">
      <h1>Hello, world!</h1>
    </div>
  `
};

הטמעת Google Font באפליקציה של Angular

שלב 1: התקנת חבילות

npm install @fontsource/roboto

שלב 2: ייבוא הפונט בקובץ ה-styles.css

@import url('@fontsource/roboto/index.css');

body {
    font-family: 'Roboto', sans-serif;
}

דגשים נוספים בהטמעת Google Fonts

  1. השתמשו רק בפונטים שאתם צריכים: אל תטמיעו פונטים שלא בשימוש באתר.
  2. בחרו במשקל הפונטים הדרוש בלבד: אם אתם צריכים רק את המשקל הרגיל של הפונט, אל תטמיעו את כל המשקלים.
  3. השתמשו בקובץ אחד: במקום להטמיע מספר קבצי פונטים, נסו לרכז הכל בקובץ אחד.

לסיכום, הטמעת Google Fonts קלה ופשוטה בכל מסגרת פיתוח שבה אתם משתמשים, בין אם זה HTML רגיל, React, Vue, או Angular. בצעו זאת בצורה חכמה כדי לשמור על ביצועים אופטימליים ו-SEO טוב.

ללמידה נוספת על Google Fonts ועל פיתוח Web בכללי אנחנו מזמינים אותכם לקורס Full-Stack.

שתפו את הפוסט

צרו קשר

דילוג לתוכן