כיצד להוסיף גופנים מותאמים אישית לאתר וורדפרס שלך

כיצד להוסיף גופנים מותאמים אישית לאתר וורדפרס שלך

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


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

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

בוא נגלה.

 מדוע עלי להשתמש בגופנים מותאמים אישית?

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

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

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

חשיבות השימוש בגופנים מותאמים אישית

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

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

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

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

חלופות גופנים של גוגל

היכן למצוא גופנים מותאמים אישית

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

הנה כמה משאבים אחרים למציאת גופנים לשימוש חופשי ומסחרי:

  1. TemplateMonster – באתר האינטרנט TemplateMonster בשוק תוכלו למצוא הכל לעיצוב אתרים הדרוש לכם. ישנם גם גופנים וחבילות גופן רבים לשימוש אישי במחיר נמוך. כמו כן, הם מוצגים בערכת ONE לפיתוח אתרים. הקולקציה ענקית ויצירתית. כדי לעזור לך לבחור, כל הגופנים מוצגים עלונים או מסגרות. לכל גופן מוצג רישיון מסחרי.
  2. MyFonts – MyFonts מציעה כיום את המבחר הגדול ביותר של גופנים בעולם. עם זאת, המחירים כאן הם גם בקטע הגבוה יותר. אז אם יש לך תקציב צמוד, יתכן שזה לא בשבילך.
  3. FontSpring – פונטספרינג מוכרת גופנים מהודרים לשימוש מסחרי. אבל כמעט בכל משפחה 1-2 גופנים חינמיים שניתן להשתמש בהם למטרות אישיות. חוץ מזה, יש קטע נפרד עם גופנים בחינם. האוסף ויברן. אך תצטרך ללמוד בזהירות את פרטי הרישיון לגופן מסוים לפני ההורדה.
  4. קופונפונטים – זהו גם אוסף נרחב של גופנים שונים. בחר כל אחד מהם ותראה דף עם מידע מפורט עליו. יש המון גופנים בחינם, והם מחולקים לקטעים בודדים. מערכת המיון ב- CufonFonts גמישה ונוחה למדי. כמו כן, תמיכה ב- Webfont כלולה.
  5. דפונט – אוסף נגיש נוסף של 3,500 גופנים בחינם. רובם מיועדים לשימוש אישי בלבד. תכונה נחמדה של DaFont היא מערכת קטגוריות. אתה יכול לבחור גופנים בסגנון קומיקס, משחקי וידאו, וינטאג ‘או מסוגננים כדמויות יפניות.

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

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

כיצד להוסיף גופנים מותאמים אישית לוורדפרס

יש כמה דרכים להוסיף גופנים לאתר וורדפרס:

  1. תוספים: במקרה זה משתמשים בתוספי וורדפרס שונים כדי להקל על התהליך.
  2. ידנית: בשיטה זו אתה זקוק להעלאת גופן שהורדת לאתר ולערוך את קובץ CSS.
  3. ערכות נושא: ערכות נושא פופולריות רבות כוללות אפשרויות מובנות להתאמה אישית של הגופנים שלך (שימו לב – לא נעסוק באפשרות זו מכיוון שהתהליך ישתנה בהתאם לנושא שאתה משתמש בו, אבל ערכות נושא איכותיות כמו נושא WordPress הכוללות יציעו באופן מקוון מסמכים שאתה יכול לעקוב אחריהם בקלות – כמו מדריך זה להוסיף גופנים מותאמים אישית לסך הכל)

אפשרות 1 – שינוי גופני וורדפרס עם תוספים

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

מאפיינים של תוספי גופן מותאמים אישית

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

להלן מספר נקודות שצריך לקחת בחשבון:

  • אפשרות להשתמש בגופן מותאם אישית
  • יכולת להשתמש ביותר מפונט אחד
  • כותרות ומרכיבי יעד
  • בונוס: היכולת לשנות הגדרות גופן מהעורך החזותי

זה הכל. הפיצ’ר הראשון ברשימה חשוב מאוד. אתה תמיד יכול להוריד גופנים מאתרים כמו DaFont, Font Squirrel וכו ‘, אך אתה צריך להיות מסוגל להעלות אותם ל- WordPress.

בואו נראה כמה תוספים עבור WordPress המאפשרים לך להעלות גופנים מותאמים אישית.

מעלה גופן מותאם אישית

מעלה גופן מותאם אישית

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

השתמש בכל גופן

השתמש בכל גופן

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

גופנים של WP

גופנים של WP

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

כיצד להתקין גופנים עם תוסף?

ניקח, למשל WP גופנים של גוגל. פשוט התקן את התוסף הזה ממאגר הוורדפרס הרשמי ופתח את החלק של גופנים.

גופנים של WP

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

אפשרות 2 – התקן גופנים מותאמים אישית של WordPress באופן ידני

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

מקצוענים:

  • באמצעות CSS תוכלו לחבר גופנים מכל פורמט: ttf, otf, woff, svg.
  • קבצי גופנים ימוקמו בשרת שלך – אתה לא תלוי בשירותי צד ג ‘.

חסרונות:

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

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

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

שלב 1: צור תיקיית “גופנים”

בתוך נושא הילד שלך צור תיקיית “גופנים” חדשה תחת: wp-content / נושאים / נושא ילדך / גופנים

שלב 2. העלה את קבצי הגופנים שהורדת לאתר שלך

ניתן לעשות זאת דרך לוח הבקרה של אירוחכם או באמצעות FTP.

הוסף את כל קבצי הגופנים לתיקיית הגופנים החדשה שנוספה: wp-content / נושאים / נושא ילדך / גופנים יצרת.

שלב 3. ייבא גופנים דרך גיליון הסגנונות של נושא הילד

פתח את קובץ ה- style.css של נושא הילד שלך והוסף את הקוד הבא לתחילת קובץ ה- CSS (לאחר הערת נושא הילד):

@סוג גופן{
font-family: 'MyWebFont';
src: url ('גופנים / WebFont.eot');
src: פורמט url ('גופנים / WebFont.eot? #iefix') ('מוטבע-opentype'),
פורמט url ('גופנים / WebFont.woff') ('woff'),
פורמט url ('גופנים / WebFont.ttf') ('סוג האמת'),
פורמט url ('fonts / WebFont.svg # svgwebfont') ('svg');
משקל גופן: רגיל;
סגנון פונט: רגיל;
}

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

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

שלב 4. כשמוסיפים נטוי, כתוב את הדברים הבאים:

@סוג גופן{
font-family: 'MyWebFont';
src: url ('גופנים / WebFont-Italic.eot');
src: פורמט url ('פונטים / WebFont-Italic.eot? #iefix') ('מוטבע-opentype'),
פורמט url ('גופנים / WebFont-Italic.woff') ('woff'),
פורמט url ('גופנים / WebFont-Italic.ttf') ('סוג האמת'),
פורמט url ('גופנים / WebFont-Italic.svg # svgwebfont') ('svg');
משקל גופן: רגיל;
סגנון פונט: נטוי;
}

כאשר הכל זהה, רק צירפנו את המאפיין בסגנון הגופן לאיטליה.

שלב 5. להוספת הגופן המודגש, הוסף את הקוד הבא:

@סוג גופן{
font-family: 'MyWebFont';
src: url ('גופנים / WebFont-Bold.eot');
src: פורמט url ('פונטים / WebFont-Bold.eot? #iefix') ('מוטבע-opentype'),
פורמט url ('גופנים / WebFont-Bold.woff') ('woff'),
פורמט url ('גופנים / WebFont-Bold.ttf') ('סוג האמת'),
פורמט url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
מודגש;
סגנון פונט: רגיל;
}

שם הגדרנו את מאפיין משקל הגופן למודגש.

זכור לציין את המיקום הנכון של קבצי הגופן עבור כל סגנון.

שלב 6. לחיבור נטוי מודגש, הקלד את הדברים הבאים:

@סוג גופן{
font-family: 'MyWebFont';
src: url ('גופנים / WebFont-Italic-Bold.eot');
src: פורמט url ('גופנים / WebFont-Italic-Bold.eot? #iefix') ('מוטבע-opentype'),
פורמט url ('גופנים / WebFont-Italic-Bold.woff') ('woff'),
פורמט url ('גופנים / WebFont-Italic-Bold.ttf') ('סוג האמת'),
url ('גופנים / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
מודגש;
סגנון פונט: נטוי;
}

ובכן, זה הכל �� עכשיו חיברת ארבעה סגנונות גופן לאתר שלך.

אבל יש הערה אחת – חיבור הגופן הזה יוצג בצורה שגויה ב- Internet Explorer 8. הנחמה היא שיש מעט מאוד אנשים שעדיין משתמשים ב- IE8.

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

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

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

זה הכל, אל תהסס להגיב. 

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me