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

Google Fonts הפך למשאב הרצוי לטיפוגרפיית אינטרנט מותאמת אישית מאז הפיתוח ב-2010. ישנן שלוש סיבות עיקריות לכך שגוגל הפכה להיות המובילה כאן. ראשית, לא היו שירותי גופנים הגונים מספיק, אז גוגל מילאה את החלל. שנית, אפילו בהתחלה, המגוון שהם הציעו היה גדול יחסית. נכון לעכשיו, ישנם למעלה מ-800 גופנים זמינים במספר סגנונות. שלישית, הגופנים האלה זמינים בחינם, מה שהופך אותם לאטרקטיביים במיוחד.

בנוסף, קל להפתיע לשלב אותם בפרויקטי העיצוב שלך. אנו נראה לך כיצד תוכל לכלול את גופני Google אלה באתר וורדפרס שלך.

גוגל גופנים

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

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

• Serif - אלו גופנים עם קווים קצרים הנובעים מהמשיכות העליונות והתחתונות של אות. Times New Roman ו-Sylfaen הם דוגמאות טובות.
• Sans Serif - כפי שהשם מרמז, אלו גופנים ללא הקווים הקטנים האלה. הם נוטים להיות בעלי אסתטיקה פשוטה ונקייה.
• תצוגה - אלו הם מה שניתן לכנות גופנים מושכי תשומת לב. הם מתאימים לכותרות ולא לטקסט ארוך.
• כתב יד - הפונטים האלה גורמים לזה להיראות כאילו מישהו כתב אותם ביד. תגלו שרבים נמצאים בסתירה או שיש להם מרווח פחות עקבי.
• מונוספייס - כמו מכונת כתיבה, האותיות שלהם תופסות אותו רוחב אופקי. הם מרווחים מאוד באופן עקבי.

בנוסף לכך, יש לך גם אפשרויות אחרות לבחירה, כמו בחירת מאפייני השפה והגופן. האחרון כולל את מספר הסגנונות, העובי, ההטיה והרוחב.

הטמעת גופנים בוורדפרס

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

שימוש ב-CSS

לחץ על הגופן מהבחירה של גוגל, והוא יעביר אותך לדף הגופן המפורט. בפינה הימנית העליונה, יש סימן "+". לחץ על זה וחלון צדדי ייפתח. לחץ על "הטמע".

עכשיו אתה יכול ללחוץ @יְבוּא. זה יפתח את קוד ה-CSS שאתה צריך להעתיק. עבור אל גיליון הסגנונות של ערכת הנושא של WordPress שלך והדבק אותו בהתחלה. ודא שהעתקת את קישור הייבוא ​​ללא ה  סוגריים. ודא שאתה שומר, והוספת את הגופן.

שימוש ב-PHP

בצע את השלבים הראשונים והעתק את הקישור שאתה מקבל לאחר לחיצה על הסימן "+". כעת, פשוט הוסף אותו לקובץ header.php של ערכת הנושא שלך. זכור לשמור על מנת שהגופן יתווסף.

שימוש בפונקציית Javascript

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

פשוט קבל את הקישור של הגופן (מhttp עד "), והוסף את זה לקובץ functions.php של ערכת הנושא שלך עם קוד נוסף סביבו. הנה הקוד שתצטרך להשתמש בו:

פונקציה custom_add_google_fonts() {

wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, false );

}

add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );

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