Search

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

ישנם מספר דרכים להוסיף 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).

מצאתם טעות בקוד? הסניפט לא עובד לכם? רישמו לי בתגובות ואני מבטיח לטפל בכך במהרה ולספק סניפט תקין...
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 הוא שמאט? האם עליי להטמיע את הפונטים של גוגל בטעינה לוקאלית במקום התוסף?
    תודה!

תגובה חדשה

Up!
לבלוג