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

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

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

השאירו תגובה

Up!