התאמה אישית של עיצוב האתר חשובה כדי להבליט את הייחודיות של העסק שלכם. פונטים הם שפה לכל דבר ועניין ושימוש נכון בפונטים יכול להבליט את הבידול שלכם בתוך האתר. במדריך הבא נסביר איך משנים פונט בוורדפרס באמצעות 3 דרכים מרכזיות:
- הטמעה ישירה של פונט גוגל
- הטמעה ישירה של פונט חיצוני שקניתם או הורדתם
- שינוי פונט באמצעות אלמנטור
הדרך המומלצת והפשוטה היא באמצעות שינוי פונט באלמנטור, אבל במידה ואתם לא עובדים עם אלמנטור תוכלו לשנות גם באמצעות השיטות הבאות שמיד נסביר עליהם.
שינוי פונט וורדפרס – פונט גוגל
באתר גוגל פונט תמצאו מבחר רחב של פונטים לשימוש חופשי (עם רישיון גוגל), כאשר תוכלו לסנן לפי קטגוריות סוגי פונטים, לפי שפות ולפי מאפייני הפונטים. ההמלצה היא לבחור פונט בעברית לאתר בעברית, כי בחלק גדול מהמקרים פונטים באנגלית אינם תומכים בטקסט בעברית.
מתוך הרשימה של הנ"ל של גוגל פונט תוכלו לבחור את הפונט שהכי מתאים לשפת המותג והאתר שלכם. לאחר בחירה הפונט, תוכלו לבחור גם באיזו סוג תצוגה יופיע הפונט. למשל האם הפונט יופיע דק או עבה, נטוי או מודגש וכן הלאה. ההמלצה היא לבחור בגודל סטנדרטי Regular 400 וללחוץ על כפתור + (הוספה).
לאחר הוספת הפונט הנבחר, תיפתח חלונית מצד ימין ובה תוכלו להטמיע את הפונט באמצעות העתקת שתי שורות קוד.
יש ללחוץ על לשונית @import ולהעתיק את שורת הקוד הראשונה לא כולל תגית STYLE עליונה ותחתונה.
באתר הוורדפרס יש ללחוץ על התאמה אישית (מופיע בלוח הבקרה תחת עיצוב), ללחוץ על לשונית הנקראת CSS מותאם אישית ולהדביק את שורת הקוד הראשונה.
חוזרים אל גוגל פונט, מעתיקים את שורת הקוד השנייה בלשונית CSS rules to specify families ומדביקים חזרה ב-CSS מותאם אישית.
שימו לב לפני הדבקת שורת הקוד השנייה, יש להוסיף תגית body וסוגריים מסולסלות {}. זה אמור להיראות כך:
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
body {
font-family: 'Secular One', sans-serif;
}
מצורף קוד לדוגמה:
לסיום יש ללחוץ על פרסום.
הטמעה ישירה של פונט חיצוני שקניתם או הורדתם
הדרך השנייה להעלאת פונט חדש לוורדפרס, היא באמצעות העלאה ישירה של פונט לשרת. יש להוריד את הפונט למחשב, לחלץ את הקובץ ולעלות אותו ישירות לשרת: public_html > wp-content > uploads
לאחר העלאת הקובץ יש להוסיף את שורת הקוד הבאה ל-CSS מותאם אישית:
@font-face {
font-family: myfont;
src: url(/wp-content/uploads/Solitreo-Regular.ttf
);
}
body {
font-family: myfont;
בשורת ה-URL בתוך הסוגריים יש לשנות את החלק האחרון של ה-URL לנתיב של הפונט שלכם. זה אמור להיראות ככה:
שינוי פונט וורדפרס עם אלמנטור
אלמנטור עושים את החיים קלים, גם בכל הנוגע לשינוי פונטים. כדי להגדיר פונט חדש יש לגשת אל העורך באלמנטור, ללחוץ על תפריט ההמבורגר בחלק העליון מימין, ללחוץ על פונטים גלובליים ולהגדיר את סוג הפונט מתוך הרשימה.
אם אתם מעוניינים לעלות פונט חדש ולהגדיר אותו באלמנטור, בדיוק עבור זה הכנתי את מדריך העלאת פונטים באלמנטור כולל מדריך וידאו בפנים.
לכל שאלה אנחנו כאן עבורכם 🙂
קראו גם:
