בעבר כתבתי על ווב-פונטס (web-fonts). תזכורת קצרה למי ששכח מה זה "וובפונטס": היום, בשונה מבעבר (ה-די רחוק, יש לומר), מעצבים ומפתחי ווב יכולים להשתמש בפונטים שונים מאריאל וטהומה (arial, tahoma) לדוגמא, לעיצוב אתרים, וזה ממש פשוט: רק "קריאה" לפונט דרך ה- css. זאת בהנחה כמובן שקובץ הפונט ממוקום בצורה זמינה על שרת..
כיום ישנם שני דרכים להטמיע פונטים מעוצבים באתר:
האפשרות הראשונה היא לקנות ממעצב פונט בפורמט ווב "לכל החיים", כמו שקונים פונטים לעיצוב פרינט, ולקבל את הקובץ בתצורה הפיזית שלו, ולמקם את הקובץ על ההוסטינג של השרת, היכן שממוקמים כל קבצי האתר: התמונות וקבצי ה-php, html , וכו'. נחזור לשיטה הזאת בהמשך.
האפשרות השניה היא לרכוש מנוי מבוסס תשלום חודשי למשל, ולקרוא מתוך קובץ ה-css לפונט שממוקם על שרת מרוחק.
ברשותכם אמנה 2 חסרונות עיקריות וקריטיות בשיטה השניה:
1. זמן הטעינה. זמן הטעינה אצל הגולש אורך כמה שניות קריטיות, עד שהמחשב של הגולש מקבל את "תמונת" האתר, וזאת מכיוון שבכל פעם שגולש נכנס לאתר ישנו קוד ש"מבקש" מהשרת המרוחק (לא היכן שממוקמים הקבצים של האתר אלא במקום מרוחק אחר…) להוריד ממנו את קבצי הפונטים לתצוגה זמנית. השרת בודק אם אכן יש רישיון לאתר להציג את הפונט לפי הדומיין, ואם כן- רק אז מואיל בטובו השרת להרשות לגולש להוריד זמנית את הפונט, ולצפות בו. במדידה שלי, לעיתים לוקח 6-7 שניות (!!!) קריטיות לאתר להיטען והכל- בגלל הסריפט הנ"ל.
אם אתם מפתחי ווב תגידו, ובצדק: "שים את הסקריפט בפוטר! ככה האתר יעלה מהר."
נכון חלקית. אם נעשה כך, רק בסוף תהילך טעינת האתר ייטענו הפונטים המעוצבים.. וזה לא רצוי.. כי קודם נראה פונט דיפולטי כלשהו שהגדרנו (אריאל, טהומה, הלווטיקה או ורדנה המקינטושאי), ורק לאחר מכן הפונט הדיפולטי יתחלף לפונט הרצוי.. ואנו לא רוצים לבלבל את עיני הקורא..
2. המנוי הזה יקר. יקר מדי לטעמי. המנוי שעליו אני מדבר, עולה באתר fonts.com כ -10$ לחודש. אמנם המנוי מאפשר שימוש בלתי מוגבל בכ- 1,200 (!!) פונטים עבריים, וכמות בלתי מוגבלת של פרוייקטים.
יכול להיות שזה מתאים למשרדי פרסום גדולים לדוגמא, עם הרבה נפח עבודה. לי אישית, זה לא מתאים.
אז אולי כבר הבנתם, מנסיוני הרב עם השיטה השניה, את השיקולים למעבר שלי לאפשרות הראשונה:
חיפשתי פונט סנס סריפי סולידי, איתו אשתמש באתר, ויזוהה עם שמי ושם האתר.
הפונט, כך החלטתי, צריך להיות שלי. לא מושכר, אלא שלי.
מצאתי את האתר של אאא. האתר הוא בעצם פרוייקט בהתהוות , המרכז תחתיו מספר מעצבים מוכשרים בטירוף, שדרך אגב, מחפשת אותך, אם אתה מעצב פונטים שמעוניין להצטרף ולמכור את מרכולתך: ישנה "משבצת פנויה", באתר…
בפרוייקט אאא אין עדיין מבחר גדול של פונטים, אך מה שקיים- מעולה!
את הפונט שלי, זהיתי מייד: "אלמוני דו לשוני".
זהו הפונט שאתם ממש עכשיו, ובזה הרגע סיימתם לקרוא פוסט שלם איתו. כל הכבוד.
חולק איתך בטענתך הראשונה בנושא זמן הטעינה.
טעינה הדף לא מתעקב בגלל קובץ מרוחק כפי שציינת ואף במקרים רבים מומלץ שקבצים רבים יתחסנו בשרת מרוחק.
כך דוגמה שרתי CDN. המטרה העיקרית של טעינת קבצים משרתים אחרים היא הגדלת כמות החיבורים בדפדפן והורדה סימטרית של הקבצים בו זמנית.
למשל אם תאחסן קבצי מדיה בשרת אחר למשל, תגביר את הטעינה של הדפים באתרך.
קרא את הפוסט שכתבתי בעבר אצל יגאל בקישור הבא: http://bit.ly/OnUVxc
בקשר ללא משתלם, מסכים איתך.
מחפש כעת פונט שהוא נוח לקריאה שאפשר להשתמש באתר אינטרנט. בודק עם אפשרויות בפונטביט כרגע.
בכל מקרה, מזל טוב על השינוי
תודה על תגובתך, יוסי.
אך עובדה היא שכאשר הסרתי את הסקריפט המדובר מה-heder, האתר נטען הרבה יותר מהר.
זמן התגובה של השרת המרוחק הספציפי הנ"ל הוא ארוך מאוד.
אני כמובן מסכים איתך שם מדובר במדיה מסוג וידאו או סאונד למשל, כדאי להשתמש בשרת ייעודי לזה (דוגמת יוטיוב למשל), ולכתוב מסגרת שתריץ את המדיה מרחוק..
או לחלק את העומסים (כשיש..) והקבצים עם שרת וירטואלי נוסף , כמו שהדגמת בפוסט, אבל אנחנו לא מדברים פה על זה..
אנו מדברים פה על סקריפט בודד שפשוט תוקע את זמן הטעינה (ושוב, זאת עובדה!) של קבצי האתר עצמו..
ושוב תודה על תגובתך המחכימה!
אחלה פוסט. וגם מאוד קריא! מוזר שלא ראיתי את האתר של אאא לפני. אלך להתרשם
ראיתי איפשהו פונטים חינמים חדשים
וגם גנרטור שהופך כל פנט לפונט רשת
מישהו יודע על מה אני מדבר?
אשמח לקישור
היי יוניש, אחלה פונט, תתחדש, גם אני רכשתי אבל לא כל כך הצלחתי להבין איפה מטמיעים את הקוד במערכת WP אשמח לעזרתך
הי יעל,
היכן קנית? כדאי שתפני אליהם לקבלת תמיכה.
בכל מקרה- לאחר שהעלית את הפונטים לשרת שלך, בד"כ קוד הטמעת הפונט שקיבלת מהמוכר, אמור להיות בקובץ ה- style.css של ה- theme שלך.
איך מגיעים אליו?
מסך האדמין בוורדפרס:
עיצוב > עורך, ותודאי שאת על קובץ העיצוב של הtheme שלך.
עכשיו הדביקי את הקוד שקיבלת עם הפונט.
אם לא הסתדרת- אשמח לעזור. צרי קשר: מלאי טופס- או הרימי טלפון
היי יוניש, רכשתי ב-אאא! קצת חפירות בקובץ CSS ואלתורים והסתדרתי בסוף, תודה על העזרה