היום נדבר על איך להטמיע Google Fonts באתר שלכם, בין אם אתם עובדים עם HTML רגיל, React, Vue, או Angular. הטמעת פונטים מהירה ופשוטה יכולה לשדרג את העיצוב של האתר ולהפוך אותו לאטרקטיבי יותר למשתמשים. בנוסף, נדבר גם על איך לבצע זאת בצורה אופטימלית מבחינת SEO.
HTML רגיל
הטמעת Google Fonts באתר HTML רגיל היא קלה ופשוטה. בואו נראה איך עושים את זה:
שלב 1: בחירת הפונט
- גשו לאתר Google Fonts.
- בחרו את הפונט הרצוי ולחצו על כפתור ה- "+".
שלב 2: קישור הפונט בקובץ HTML
- לאחר בחירת הפונט, העתיקו את קוד ה-
<link>שמופיע. - הדביקו את הקוד בתוך תגית
<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
- השתמשו רק בפונטים שאתם צריכים: אל תטמיעו פונטים שלא בשימוש באתר.
- בחרו במשקל הפונטים הדרוש בלבד: אם אתם צריכים רק את המשקל הרגיל של הפונט, אל תטמיעו את כל המשקלים.
- השתמשו בקובץ אחד: במקום להטמיע מספר קבצי פונטים, נסו לרכז הכל בקובץ אחד.
לסיכום, הטמעת Google Fonts קלה ופשוטה בכל מסגרת פיתוח שבה אתם משתמשים, בין אם זה HTML רגיל, React, Vue, או Angular. בצעו זאת בצורה חכמה כדי לשמור על ביצועים אופטימליים ו-SEO טוב.
ללמידה נוספת על Google Fonts ועל פיתוח Web בכללי אנחנו מזמינים אותכם לקורס Full-Stack.
