סאבי / סניפטס / הוספה והטמעת פונטים של גוגל לאתר וורדפרס

הוספה והטמעת פונטים של גוגל לאתר וורדפרס

עודכן ב-15 לנובמבר, 2024 • 10 תגובות

ישנם מספר דרכים להוסיף Google Fonts לאתר וורדפרס, אתן פה דוגמה לשתיים מהן. אפשרות ראשונה והפחות מומלצת היא להוסיף את הפונטים ישירות ל header.php של התבנית (כמובן שעדיף בתבנית בת).

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">

כשאתם משתמשים בשיטה זו שימו לב כי עליכם להוסיף את הקריאה ל Google Fonts לפני שאתם קוראים לקובץ stylesheet הראשי.

אפשרות שנייה ויותר מומלצת היא על ידי שימוש ב wp_register_style ו wp_enqueue_style. הוסיפו את הקוד הבא לקובץ functions.php:


/* The Right way to add Google Fonts to WordPress */
function add_my_google_fonts() {

	wp_register_style('my-googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,600,700,400');
    wp_enqueue_style( 'my-googleFonts');
}
add_action('wp_enqueue_scripts', 'add_my_google_fonts');

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

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

מצאתם טעות בקוד? הסניפט לא עובד לכם? רישמו לי בתגובות ואני מבטיח לטפל בכך במהרה ולספק סניפט תקין...

פוסט הבא: הסרת תגיות Html מיותרות מטפסים ב Contact Form 7

פוסט קודם: הוספת class לפוסט האחרון בלולאה

10 תגובות...

הוסיפו תגובה חדשה

שלי 27 דצמבר 2018, 11:12
היי, אני רוצה להוריד OPEN SANS HEBREW יש אופציה כזו? כי מצאתי את הקישורים הללו:
```
@import url(//fonts.googleapis.com/earlyaccess/opensanshebrew.css);
```
```
function add_my_google_fonts() {
    wp_register_style('Open Sans Hebrew', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,600,700,400');
    wp_enqueue_style( 'Open Sans Hebrew');
}
add_action('wp_enqueue_scripts', 'add_my_google_fonts');
```
הגב #
- רועי יוסף 27 דצמבר 2018, 11:19
  היי שלי,
  Open Sans Hebrew לא קיים ב Google Fonts. את יכולה להוסיף את הקוד הראשון בתגובה שלך לקובץ ה CSS ולהשתמש בו. לאחר שהוספת את יכולה להשתמש בו בצורה הבאה:
```
.class {
  font-family: 'Open Sans Hebrew', serif;
}
```
  הגב #
גילי ברוך 15 מאי 2019, 10:51
היי!
הוספתי את קובץ ה functions.php עליו המלצת אבל האם הפונטים עדיין לא מופיעים לי ברשימת הפונטים (סלח לי על הבורות, מעט חדשה בתחום).. מהו הקוד css המתאים לקביעת משפחת הפונטים Assistant לכל הכותרות, טקסטים, תפריטים וכו?…
הגב #
- רועי יוסף 15 מאי 2019, 23:12
  היי גילי,
  באיזה רשימת פונטים את מצפה שזה יופיע? לאחר הוספת הקוד ב function.php עלייך לקבוע ברמת ה CSS אילו אלמנטים יציגו את הפונט Assistant.
  הגב #
רוב 13 יוני 2019, 17:28
אם אני רוצה להוסיף את פונט arimo עם תמיכה בעברית לפונט רגיל ומוגדש
זה קוד?
```
function add_my_google_fonts() {

	wp_register_style('my-googleFonts', 'ttps://fonts.googleapis.com/css?family=Arimo:400,700&display=swap&subset=hebrew');
    wp_enqueue_style( 'my-googleFonts');
}
add_action('wp_enqueue_scripts', 'add_my_google_fonts');
```
הגב #
- רוב 13 יוני 2019, 17:29
  שכחתי לשאול על ה-CSS ואז בקובץ CSS פשוט לעשות
```
font-family: 'Arimo'
```
  הגב #
  - רועי יוסף 14 יוני 2019, 3:20
    כן רוב, בדיוק כך….
    הגב #
    - רוב 16 יוני 2019, 10:15
      תודה, לא צריך font-face?
      רק
      body{font-family: 'Arimo'}
      הגב #
יעל רם 17 אפריל 2020, 10:53
היי רועי, כמה שאלות לגבי הפונטים.
ראיתי שהם די מאטים לי את האתר ואני מנסה להטמיע אותם בדרך שתופסת הכי פחות מקום וזמן. יש לי את התוסף של גוגל פונטס ובנוסף לזה שמתי גם CSS לכותרות שרציתי שיהיו בפונטים מסוימים. האם ה CSS הוא שמאט? האם עליי להטמיע את הפונטים של גוגל בטעינה לוקאלית במקום התוסף?
תודה!
הגב #
- רועי יוסף 17 אפריל 2020, 13:47
  היי יעל,
  איני מכיר את התוסף עליו את מדברת, אך לפונטים תמיד השפעה שלילית על הטעינה של האתר. טעינה לוקאלית אולי תעזור ותאפשר לך שליטה רבה יותר וטעינה רק של המשקלים הנחוצים. ה CSS הוא לא הבעיה, אלא הטעינה של קבצי הפונט. נושא האופטימיזציה של פונטים הוא מאד רחב, אם את באמת רוצה להכנס לעומק אז אני מציע לתת מבט בפוסטים הבאים:
  הגב #