בחלק הראשון של המאמר טיפוגרפיה עברית באתרים, עסקתי במאפייני הטיפוגרפיה – פונטים, משקלים, גדלים, מרווחים וצבעים. הראיתי כי לעיתים כל שצריך על מנת שהאתר יראה מקצועי זה שימוש נכון בטיפוגרפיה, ואיך באמצעות רעיונות פשוטים ליישום, ניתן להפיח רוח חיים בכל עיצוב. בחלק הזה של המאמר אני מתעסק בצדדים הטכנים של שימוש בפונטים – איפה מוצאים אותם, איך רוכשים אותם, מהם תנאי הרישיון להטמעה של פונטים ואיך מטמיעים פונטים באתרי וורדפרס.
איפה ניתן לרכוש פונטים לאתר?
יש כמה חברות ישראלית אשר מוכרות פונטים. ברוב החברות יש מחיר לרכישה של משקלים בודדים ומחיר הנחה למי שרוכש את משפחה שלמה. רוב הפונטים נוצרו בתקופה בה לא הייתה אפשרות להטמיע פונטים באתרי אינטרנט, ולכן מידת ההתאמה של הפונטים ל-WEB משתנה מחברה לחברה ומפונט לפונט. על מנת להיות בטוחים שהפונט אותו אנו רוצים ישמש אותנו היטב באתר, מומלץ לבקש מהחברה לראות אתרים בהם נעשה שימוש בפונט, ולא להסתפק בתצוגה שבאתר החברה. לי אישית יש ניסיון טוב מאוד עם הפונטים של אאא. הספרייה של אאא אינה גדולה כמו הספריות של פונטביט ומסטרפונט, למשל, אך אני ממליץ עליה בלב שלם כיוון שהיא מכילה פונטים מגוונים, איכותיים ומתאימים מאוד להטמעה באתרים.
חברות פונטים ישראליות
בשונה מפונטים למחשב, אותם קונים פעם אחת וניתן להשתמש בהם עבור פרוייקטים רבים, רישיון לפונטים המיועדים להטמעה באתרי אינטרנט נמכרים לפי פרוייקט – כלומר, לפי דומיין. בחלק מהחברות יש סעיף האוסר להשתמש בפונט לצורך הקלדה (לדוגמה – בטפסי צור קשר, תיבות חיפוש וכו'). בחברות מסויימות יש סעיפים שמחייבים את בעל האתר לחסום הורדה של קובצי הפונטים. תנאי הרשיון של פונטים לאינטרנט הם מורכבים לעיתים. חשוב לקרוא אותם בעיון ולעמוד בהם, על מנת לא להיות חשופים להליכים משפטיים.
איך נציג באתר טקסט מודגש?
הצגת טקסט מודגש באתר יכולה להתבצע בשתי דרכים: או ע"י שימוש בקבצים יחודיים של הפונט המודגש (למשל: Open-Sans-Hebrew-Condensed-Bold.woff) או באמצעות היכולת האוטומטית של הדפדפן להציג טקסט מודגש. כאשר אנחנו מעלים לאתר קובץ במשקל אחד בלבד (למשל – רגיל) ואז מגדירים לו להיות מודגש (באמצעות HTML / CSS / Elementor וכו') הדפדפן לא משתמש במשקל Bold שנוצר ע"י יוצר הפונט (כי לא סיפקנו לו קובץ מתאים). במצב כזה הדפדפן בעצמו מעבה את הפונט כדי שיראה מודגש וכבד יותר. אלא שהדפדפן עושה את הפעולה הזאת בצורה לא טובה, אשר פוגעת באיכות הטיפוגרפית של האתר.
לעומת זאת, כאשר אנחנו עושים שימוש בקבצים יחודיים למשקל המודגש, אנחנו מקבלים פונט שנראה טוב יותר, כיוון שהושקעה בו חשיבה כיצד להציג כל אות ואות מודגשת. ההבדל ניכר בפרטים הקטנים ובחווייה הכללית, וזה מה שגורם לאתר להיראות Fine. במקרה שהפונט בו אנחנו משתמשים הוא פונט פרמטרי, הרי שקובץ אחד יספיק עבור כמה משקלים.
הטמעת טקסט כתמונה ולא כטקסט חי
אם יש ברשותך פונטים ברישיון למחשב (ולא ברשיון web), אתה רשאי להטמיע אותם באתר בתוך תמונה (לא כטקסט חי, לדוגמה – בתוך לוגו), אך זה לא מומלץ מכמה סיבות:
א. משקל הדף – כיום, כשרוב הכניסות לאתרים נעשות מטלפונים ניידים ומרשתות אלחוטיות, יש חשיבות גדולה למהירות הטעינה של הדף. תמונות שוקלות הרבה יחסית ומכבידות על טעינת הדף ולכן לא מומלץ להשתמש בטקסט בתוך תמונה.
ב. התאמה לטלפונים ניידים – כמו שציינתי קודם, התאמה לטלפונים ניידים היא לא משהו שניתן להקל בו ראש (כתבתי על התאמת האתר למובייל פוסט מקיף). טקסט אשר מוטמע כתמונה לא מגיב לגדלי מסך שונים ולכן עלול ליצור ניראות לא מדוייקת בטלפונים ניידים.
ג. קריאות ע"י מנועי חיפוש – מנועי החיפוש (ובראשם כמובן Google) "קוראים" את הטקסט שבאתר ומשתמשים בתוכן על מנת לשקלל את ציון האתר ולהחליט היכן למקם אותו בתוצאות החיפוש. טקסט אשר מוכנס כתמונה אינו נקרא ע"י מנועי החיפוש ולכן פוגע בקידום האתר.
ד. נגישות – טקסט בתמונה אינו נוח לקריאה, בעייתי בקוראי מסך ופוגע בנגישות האתר. אם בכל זאת בחרת לשים טקסט בתמונה, חשוב מאוד לזכור להוסיף את הטקסט גם כטקסט חי בתגית ה-alt.
מתי כן יש הגיון בטקסט בתוך תמונה?
ראינו שאין הצדקה להכנסה של טקסט בתוך תמונה באתר. מקרה יוצא דופן הוא לוגו החברה אשר מוצג באתר. כאשר יש אפשרות, גם את לוגו החברה עדיף להטמיע כטקסט חי, אך יש מקרים רבים ומובנים בהם אין זה אפשרי עיצובית, ובהם ניתן לוותר ולהטמיע את שם החברה כחלק מתמונת הלוגו.
מבחינת עמידה בתנאי הרישיון של פונטים קנייניים הטמעה כזו אינה מצריכה רשיון לשימוש ב-WEB, אך כיוון שצעד זה אינו אופטימלי לקידום האתר מומלץ להתייעץ עם מקדם אתרים. גם כאן יש לשים לב לנגישות ולהוסיף תגית alt.
פונטים עבריים בחינם
לא בכל פרוייקט יש תקציב לפונטים קנייניים. לשמחתנו בשנים האחרונות התרחב מעגל הפונטים החינמים והוא אף כולל כמה פונטים שהם לא פחות ממצויינים. המקור החינמי המרכזי לפונטים הוא Google Fonts. כאן תמצאו מגוון פונטים גדול מאוד באנגלית, ומגוון קטן בהרבה של פונטים בעברית. מתוך 17 הפונטים העבריים שמוצעים בחינם ב-Google Fonts בולטים לחיוב Heebo ו-Assistant.
Varela Round יפה אך מגיע במשקל אחד בלבד, Amatic המיוחד והדקיק מתאים לפעמים בתור פונט כותרות, ויש מעצבים רבים אשר אוהבים להשתמש ב-Alef וב-Rubik (אני פחות מתחבר אליהם). שאר הפונטים מתאימים אולי למקרים מסויימים מאוד.
פונטים מצויינים נוספים שזמינים בחינם הם Open Sans Hebrew ו-Open Sans Hebrew Condensed, פונטים שנוצר מתוך הסגנון של הפונטים הלטינים Open Sans ו- Open Sans Condensed, פונט חינמי, סנס-סריפי, הפופולארי מאוד בממשקים.
עוד פונטים חינמים בעברית יש כאן: freefonts.co.il (לא כולם זמינים להורדה כפונטים לאינטרנט). עוד כמה פונטים מלאי אופי המתאימים לכותרות קצרות ניתן למצוא בפרוייקט החייאת פונטים מכרזות עבריות ישנות של תמיר פומרנץ.
פורמטים יחודיים להטמעת פונטים באתרי אינטרנט
לרוב קובצי OTF ו-TTF הם הקבצים הנפוצים לשימוש במחשב ובעבודות דפוס. לעומת זאת, באינטרנט משתמשים בפורמטים המתאימים להצגה באתרים: woff, woff2, svg ו-eot.
אם אין צורך בתמיכה יוצאת דופן בדפדפנים ישנים, ניתן להשתמש בקובץ woff2 בלבד. זהו סוג הקובץ המתקדם ביותר: המבנה שלו מאפשר גודל קובץ קטן, הביצועים שלו משופרים והתמיכה בו טובה למדי. אם יש צורך בתמיכה באקספלורר ובגרסאות ישנות של דפדפן אנדרואיד יש להשתמש גם בקובץ woff, שהתמיכה בו נרחבת עד יותר.
ככל שטוענים יותר פורמטים מגיעים לכיסוי גבוה יותר של מקרי קצה, אך יש לכך השפעה שלילית, ולו קטנה, על מהירות טעינת הדפים (כיוון שנטענים עוד קובצי פונט). למעשה – למעט במקרים של דרישה איפיונית ספציפית מומלץ לטעון woff ו-woff2. כאשר קהל היעד של האתר הוא טכנולוגי וצעיר מומלץ לטעון קובצי woff2 בלבד.
הפונט שאני רוצה לא זמין בקבצי web. יש מה לעשות?
כן. יש מספר כלים חינמים On-Line המאפשרים להמיר קובצי פונטים רגילים לפונטים ל-WEB. אחד הנוחים שבהם הוא transfonter.org שעושה עבודה לא רעה. עם זאת, יש צרכים מיוחדים של פונטים לרשת שמערכות אוטומטיות לא יכולות למלא, ובמקרים רבים אין תחליף לפונט קנייני שנעשה עבורו תהליך מקצועי של התאמה ל-WEB.
מה זה Variable Fonts?
Variable Fonts (פונטים פרמטרים) היא שיטה חדשה יחסית להטמעת פונטים באתרי אינטרנט. לעומת הטמעה רגילה, בה כל משקל מוזן עם קובץ משל עצמו, Variable Font הוא קובץ אחד המכיל המון מידע על הפונט (משקלים, נטיות, צורות אות יחודיות ועוד). דבר זה מסייע לנו לשפר את ביצועי טעינת האתר, כי נחסכת הטעינה של כל משקל לחוד. Variable Fonts מאפשרים לנו לעבוד בגמישות שלא הכרנו קודם – למשל, במקום מגבלה של 9 משקלים (קפיצות של 100), ניתן להגדיר משקל של Variable font בקפיצות של 1 – 999 משקלים שונים.
כיום השימוש ב-Variable Fonts עדיין אינו נפוץ מאוד, בעיקר עקב קשיי תאימות לדפדפנים מיושנים, אך ניתן לצפות כי בעתיד הנראה לעין מגמת ה-Variable Fonts תתפוס תאוצה ותהפוך לסטנדרט המקובל.
איך מטמיעים פונט באתר וורדפרס?
ישנן מספר דרכים להטמיע פונטים באתר WordPress. הבחירה תלויה באופן בו נבנה האתר (תבנית חינמית או מסחרית / תבנית בבנייה אישית / אלמנטור פרו) ובמידת הניסיון והידע של בונה האתר. להלן סקירה קצרה:
תבנית – תבניות פופולריות (OceanWP, ASTRA ועוד) מגיעות עם אפשרות לבחירה של מגוון פונטים מ-Google Fonts, ובתוך זה הפונטים העבריים.
לחלק מהתבניות יש HOOK מיוחד לטעינה של פונטים (כדי שהם יופיעו באזור ה"התאמה אישית"). בתבנית OceanWP, למשל, ניתן להוסיף פונט לאזור ההתאמה האישית עם ההוק ocean_add_custom_fonts (המקום לקוד הזה הוא בקובץ functions.php בתבנית הבת):
// Add custom fonts to oceanWp font settings
function ocean_add_custom_fonts() {
return array( 'almoni tzar', 'mugrabi' );
}
* הוספת הפונט דרך ההוק אינה תחליף להטמעת הפונט באמצעות CSS (פרטים בהמשך).
* על מנת לדעת אם התבנית בה אתם משתמשים תומכת בהוספה של פונטים דרך ממשק או הוק קיראו את התיעוד שלה (Documentation).
אלמנטור – אלמנטור הוא תוסף לבניית דפים, אשר פופולארי מאוד בערך משנת 2017. התוסף מאפשר לבחור בין מגוון פונטים של Google Fonts, וגם את Open Sans Hebrew ניתן לבחור בו. האפשרות הטובה ביותר היא להגדיר באופן גלובלי פונטים לכותרות ולפיסקאות הטקסט – פונטים ברירת מחדל. הגדרות אלו משפיעות על כל החלקים באתר אשר נבנו עם אלמנטור (ולא על כל דף לחוד).
על מנת להגיע לאפשרות זו יש ללחוץ על הסמל של שלושת הקווים האופקיים (המבורגר) שממוקם בראש ה-Editor (מעל אזור הוידג'טים). לאחר שבוחרים פונטים חשוב ללחוץ על כפתור "החל" ולא להסתפק בלחיצה על כפתור "עידכון".
החל מאלמנטור 2.9 ניתן גם להגדיר טיפוגרפיה באופן גלובלי לכל סוג תוכן (כותרות, פיסקאות, כפתורים, שדות טופס וכו'). על מנת להגיע לאפשרות זו יש ללחוץ על הסמל של שלושת הקווים האופקיים (המבורגר) שממוקם בראש ה-Editor (מעל אזור הוידג'טים) ואז לבחור בעל מנת להגיע לאפשרות זו יש ללחוץ על הסמל של שלושת הקווים האופקיים (המבורגר) שממוקם בראש ה-Editor (מעל אזור הוידג'טים) ואז לבחור ב Theme Style .
מלבד הגדרות ברירת המחדל, אשר מועילות מאוד ליצירת מראה אחיד באתר, ניתן להגדיר פונט ספציפי עבור כל אלמנט באלמנטור ע"י לחיצה על סמלי הטיפוגרפיה:
אם מעוניינים להטמיע באתר פונטים שנרכשו עבורו, ניתן להוסיף פונטים נוספים דרך הממשק הנוח שאלמנטור מעניק לנו (אפשרות זאת קיימת רק באתרים עם אלמנטור פרו).
לשם כך יש לצאת מהממשק של אלמנטור, אל לוח הבקרה של WordPress (לוח הבקרה – אלמנטור – Custom Fonts). לכל משפחה ניתן להעלות דרך הממשק עד תשעה משקלים שונים. הגדרה של קובץ Woff2 תספיק בהחלט עבור רוב האתרים, אך ניתן להעלות גם קובצי woff כדי לתמוך בדפדפנים ישנים.
תוסף – באמצעות התוסף Use Any Fonts ניתן להטמיע באתר פונטים מותאמים אישית ללא כתיבת קוד CSS כלל. התוסף תומך כמעט בכל התבניות וה Page Builders. אני לא ממליץ להשתמש בתוסף לצורך הטמעת פונטים, אך משתמשים רבים מוצאים אפשרות זאת כנוחה. התוסף אמין מאוד וזוכה לתמיכה מעולה – 100,000 התקנות פעילות ן-4.5 כוכבים (מעל 800 מדרגים).
CSS – ניתן להטמיע פונטים בקלות יחסית באמצעות טכנולוגיית Font Face. בחלק מהחברות, כאשר רוכשים פונט מקבלים קוד הטמעה מוכן. את הקוד יש להדביק בקובץ CSS שיוצרים בתבנית הבת (למשל Custom.css).
/* Webfont Source: https://alefalefalef.co.il/asimon
Licensed pageviews limit: 100,000/month */
@font-face{
font-family: 'asimon';
font-weight: 400; /*(regular)*/
font-style: normal;
src: url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff2') format('woff2'),
url('YOUR_FULL_URL_PATH_HERE/asimon-regular-aaa.woff') format('woff');
}
@font-face{
font-family: 'asimon';
font-weight: 700; /*(bold)*/
font-style: normal;
src: url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff2') format('woff2'),
url('YOUR_FULL_URL_PATH_HERE/asimon-bold-aaa.woff') format('woff');
}
@font-face{
font-family: 'asimon';
font-weight: 900; /*(black)*/
font-style: normal;
src: url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff2') format('woff2'),
url('YOUR_FULL_URL_PATH_HERE/asimon-black-aaa.woff') format('woff');
}
אחרי הטמעת הפונט ב-Font Face יש להגדיר באילו מצבים (סלקטורים) הפונט צריך להיות מוצג (צעד זה אינו רלוונטי כאשר מכניסים את הפונט לתבנית באמצעות Hook). לדוגמה:
h1 {
font-family: 'asimon', 'Dosis', sans-serif;
font-weight: 400;
font-size: 3em;
}
בדוגמה מוגדר שכל כותרת מסוג H1 (כותרת ראשית) תוצג עם הפונט אסימון. ויש גם Fallback – אם הפונט אסימון לא יטען כראוי, יעשה שימוש בפונט דוסיס. אם גם זה לא יעבוד יבחר פונט מערכת מסוג סנס-סריף.
סיכום
ישנם מגוון מקורות למציאת פונטים נהדרים ויש מגוון דרכים להטמיע אותם באתרי WordPress. איך לבחור פונטים לאתר אינטרנט? כיצד טיפוגרפיה משתלבת בעיצוב? קיראו את טיפוגרפיה עברית באתרים – החלק הראשון.
