טעינת פונטים באופן לוקאלי והסרת משקלים מיותרים
נכתב ע"י יוחאי ירמיהו14 שאלות
תיאור קצר לשיעור: בשיעור הזה נלמד איך לטעון פונטים באתר באופן לוקאלי באמצעות תוסף שנקרא Local Google Fonts. בנוסף נבין איך להקטין את מספר המשקלים שבאופן רגיל נטען באתר.
אורך השיעור: 13:53 דקות
קורסים המכילים את השיעור וידאו:
איך לבנות אתר בחינם בשעה וחצי?
תוכן השיעור:
אתר לטעינת פונטים באופן גלובלי:
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
מתחילים בקטן - קורסים לבוני אתרים בפחות מ-99 ₪
-
קורס: וורדפרס Tool Kit
69.00 ₪ -
20 אלף בחודש מבניית אתרים
69.00 ₪ -
בניית אתרים על AI – בינה מלאכותית – (הקורס עדיין לא מוכן)
99.00 ₪ -
זכויות יוצרים בדיגיטל
69.00 ₪ -
יסודות העיצוב לבוני אתרים
69.00 ₪ -
קורס קלאודוויז + קורס קלאודפלייר + פתיחת מייל עסקי בחינם
29.00 ₪ -
אפיון ראשוני ומחקר מילות מפתח
29.00 ₪ -
התקנת וורדפרס על המחשב
29.00 ₪
עוד לא צפיתם בהדרכה? זה בחינם!
יש לי הצעה מעניינת יצרתי הדרכה מלאה של למעלה משעתיים שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- קורס לבנות אתר ב-10 ימים 52 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: קורס אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קורס קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-30 ימים
רכשו את הקורס 522 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 600 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.
- קורס וורדפרס Beginner קורס בניית אתרים למתחילים
- קורס וורדפרס Tool Kit הצעת מחיר + אפיון + צ’ק ליסט + התנהלות עם לקוחות
- קורס בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- קורס וורדפרס Next Level בניית אתרים למתקדמים
- קורס וורדפרס SEO התאמת אתרים לגוגל
- קורס: אלמנטור Ninja הקורס שיהפוך אותך לנינג’ה באלמנטור
- קורס: אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה
- קורס וורדפרס Rocket שיפור מהירות לאתר
- קורס וורדפרס Security חיזוק אבטחה לאתר
- קורס וורדפרס Global בניית אתר דו לשוניים בכל השפות
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: קורס Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- 666 שיעורים למתחילים + למתקדמים
- תמיכה לשאלות בעמודי השיעורים לשנה
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-30 ימים
רכשו את הקורס 456 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג’ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
14 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
אולי אני מפספס משהו,
אבל בשביל טעינה לוקאלית , האם לא ניתן להסתפק בהעלאת הפונטים דרך ללוח הבקרה של ורדפרס אל אלמנטור>>ניהול פונטים.
להעלות את תקיית הפונטים (למשל אצלי זה רק פונט של Heebo שמשתמש לכל האתר).
ובשיעורים הקודמים הראית איך דרך תוסף ה Rocket , אפשר לגרום שהטעינה של קבצי אלמנטור תהיה כקובץ פנימי ולא חיצוני, כחלק משיפור כל ה CSS ועוד ואופטימיזציה לקוד.
אם כך, בדרך הזו זה כבר ‘טעינה לוקאלית’. לא?
ולא צריך את הדרך שאתה מציג כאן.
אין קשר בין ה-CSS כחלק חיצוני/פנימי לטעינה של הפונטים באופן לוקאלי.
זאת שאלה מעניינת, אני באופן אישי לא משתמש בניהול פונטים של אלמנטור וככה אני עושה את זה אבל אתה יכול לבדוק ולראות אם זה עובד והאם זה עוקף את הטעינה הרגילה של הפונט החיצוני (שאותו תצטרך לבטל).
מה שכן שחיפשתי פתרון לנושא לא ראיתי שמישהו מבצע את זה דרך האזור של ניהול פונטים אבל אתה יכול לנסות ומי יודע אולי תצליח.
אני מנסה להכניס טעינה לוקאלית בתבנית הבת, כמו שאתה מדגים.
כאשר אני מזין את הקוד שהאתר מספק אל קובץ ה style.css,
אז מופיע מיני-שגיאה (לא תמרור אדום, אבל תמצרור צהוב עם הכיתובים “@font-face declaration doesn’t follow the fontspring bulletproof syntax”)
מציין שקודם להכנסת התוכן החדש לתוכן ה style.css, התוכן הישן בתבנית הבת הוא :
/*
Theme Name: astra child
Template: astra
*/
@import url(“../astra/style.css”);
אני מניח שצריך אולי למחוק חלק מן התוכן הישן בתבנית הבת לפני הכנסת התוכן החדש?
אגב התוכן החדש שהכנסתי, כמו מה שמופיע באתר בהתאם, :
/* heebo-300 – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 300;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-300.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-300.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* heebo-regular – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 400;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* heebo-500 – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 500;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* heebo-600 – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 600;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-600.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-600.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* heebo-700 – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 700;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-700.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* heebo-800 – latin_hebrew */
@font-face {
font-family: ‘Heebo’;
font-style: normal;
font-weight: 800;
src: local(”),
url(‘fonts/heebo-v21-latin_hebrew-800.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘fonts/heebo-v21-latin_hebrew-800.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
אני לא מכיר את השגיאה הזאת, תנסה לחכות שהאתר יחזור לפעילות ותראה האם זה עובד ביחד עם הקוד של האתר.
תנסה גם להתעלם מהשגיאה ולראות האם בפועל הפונט מוצג בצורה טובה באתר או לא ואם זה מוצג בצורה טובה באתר אז תתעלם מזה.
האם חובה למחוק דרך Asest-clean-up את הקבצים שאלמנטור טוען מהמקור החיצוני,
לפני שמבצעים את התהליך שאתה מראה של הורדת הפונטים אל תוך שרת האחסון כאחסון פנימי?
והאם עד שלא מוחקים דרך ה Asest-clean-up אז השינוי לא יעבוד ?
(או שהמחיקה סתם נועדה בשביל שתהיה אינדיקציה ברורה מתי הפעולה שלנו בהכנסת טעינת הפונט החדש עבדה..)
אתה חייב לבטל את הטעינה של אלמנטור כי אם אתה לא מבטל את הטעינה זה עדיין טוען לך קובץ חיצוני של הפונט מגוגל.
וזאת גם הדרך לקבל אינדקציה של האם התהליך עובד או לא.
זה צעד חד פעמי שצריך להיעשות?
אני יכול למחוק את זה דרך Asest-clean-up,
ואז למחוק את התוסף Asest-clean-up, והשינויים עדיין יישארו?
1) זה צעד חד פעמי
2) אתה לא יכול למחוק את התוסף. אם אתה מוחק את התוסף כל השינויים שלו נמחקים ביחד איתו.
הזכרת בשיעורים קודמים לגבי פונטים,
שהמקרים בהם רואים שהפונט ‘קופץ’ בחלקי השניות בטעינת העמוד, וקופץ מפונט ישן אל הפונט הרצוי,
זה כתוצאה מהכנסה לא טובה/נכונה של הפונטים.
האם מה שגורם לכך זה הימצאות של סוגי פונטים מתנגשים (מה שדברת במודל 5, שיעור 15 , לשים לב שאלמנטור טוען פונט מסויים וגם לשים לב שיש פונט בודד גם מהחלק של התבנית בוורדפרס)?
או שמה שגורם לכך זה מה שאתה מלמד בשיעור הנוכחי, של טעינת הפונט באופן לוקאלי מתוךשרת האחסון ולא דרך שרת של גוגל?
—–
כרגע העניין של ‘קפיצת’ הפונט מאוד מפריע לי. במיוחד שאני משתמש ב Delay-JS בתוסף המטמון (דווקא לי עובד נהדר, חוץ מהקטע של הפונט שתקוע). ואז עד שאני לא מזיז את העכבר, המלל הסטטי שמופיע בעמוד, מופיע בפונט ישן ולא האמיתי, ורק בהזזת העכבר הוא ‘לובש’ את הפונט העדכני של ה Heebo.
לא יודע מאיפה באתר מגיע לי הפונט הישן. כי Heebo זה הונט היחיד שאני משתמש בו. וגם בדקתי וזה קיים גם באלמנטור וגם בוורדפרס, כמו שהדגמת וציינת לוודא במודול 5 שיעור 15.
האם טעינה לוקאלית זה מה שאמור לפתור את זה?
(נשמע לי שלא. כי הטעינה לוקאלית רק עוזרת לזירוז טעינה. אבל כא ןנידמה שיש פונט שורשי יותר שמסתתר איפשהו. למרות שהגדרתי בוורדפס שברירת המחדל זה Heebo וגם ברירת המחדל כשפונטים לא נטענים – שיהיה Heebo)
היי, הקפיצה של הפונט היא לא מהכנסה לא נכונה של הפונט זה פשוט הזמן שלוקח לפונט להיטען. ובדרך כלל לוקח יותר זמן לקובץ להיטען אם הוא מגיע משרת חיצוני.
אם אתה טוען את הפונט באופן לוקאלי אם CSS אז זה אמור לפתור את הבעיה של ה-Delay JS כי אתה משנה את האופן שבו הפונט נטען לטעינה ממקור אחר שאין לו Delay.
במחיקה של טעינת פונטים-צד שלישי (דרך ה Asset cleanup),
הצגת למחוק את גוגל פונט.
אני רואה שיש עוד קובץ צד שלישי של אסטרה (astra-google-fonts * Stylesheet (.css)) בנוסף לגוגל-פונט הרגיל שהצגת בסרטון.
האם למחוק גם אותו? למחוק את שתיהם?
זה תלוי באיך בנית את האתר והאם יש שימוש בפונט של אסטרה.
בכל הדברים הקטנים מהסוג הזה יהיה לך יותר קל ומהיר פשוט למחוק ואם זה לא עובד בצורה טובה להחזיר.
בתבנית-הבת של אסטרה מופיע לי “@import url(“../astra/style.css”);”
אני לא רואה שאצלך בצילום הוידאו זה מופיע.
בינתיים עד עכשיו אני מכניס מתחת לשורה הזאת,
את קוד-הפונט מהאתר שסיפקת.
האם למחוק את השורה שציטטתי מקודם?
(אני מציין שקודם לשורה זו, מופיע המלל הרגיל שיש בתבניות בת,
של
/*
Theme Name: astra child
Template: astra
*/
ורק מתחת לזה יש את השורה שציטטתי מקודם)
היי יעקב, ענית לך בתשובה הקודמת.
אנחנו נכנסים למקומות שאני כבר לא יכול לענות לך על כל דבר הכי קטן.
אם מדובר במשהו פשוט שאתה יכול לפעיל ולראות אם זה עובד אז עדיף שתעשה את זה בעצמך במקום לפרסם שאלה.
בדברים מהסוג הזה יהיה יותר פשוט להסיר את האפשרות, לראות אם האתר עובד ואם זה גורם לבעיות להחזיר את האפשרות למה שהיה לפני (וזאת התשובה שנתתי לך בשאלה הקודמת).