מה ספריית הגופנים של שופיפיי מכילה, בדיוק
בעורך של שופיפיי יש בוחר גופנים נוח, עם מאות גופנים. מה שלא כתוב לידו הוא שקובצי הגופנים האלה נחתכו לטווחי תווים מסוימים. התיעוד למפתחים מפרט אותם: לטיני בסיסי, Latin-1 Supplement, Latin Extended-A וסימני מטבע. מספר קטן של גופנים כולל גם טווחי CJK ליפנית. עברית לא נמצאת באף אחד מהטווחים.
מה שקורה אחר כך הוא התנהגות רגילה של דפדפן: כשהוא פוגש תו שאין לו צורה בגופן הראשון, הוא ממשיך לגופן הבא ברשימה, ובסוף לגופן ברירת המחדל של מערכת ההפעלה. באייפון זה יהיה גופן אחד, באנדרואיד אחר, בווינדוס שלישי. הלטינית שלכם עקבית בכל מכשיר; העברית שלכם נראית אחרת בכל מכשיר, ובדרך כלל גנרית.
לכן גם שופיפיי עצמה כותבת באותו עמוד: אם צריך טווח רחב יותר של תווים, אפשר להשתמש בגופני מערכת, בשירותי גופנים חיצוניים, או להעלות קבצים משלכם.
שלוש דרכים להביא גופן עברי
1. גופני מערכת
הדרך הזולה: לא לבחור גופן עברי בכלל, ולהגדיר בתבנית "ערימת גופנים" של גופני מערכת שיש בהם עברית טובה. אין קובץ לטעון, הטקסט מוצג מיד. החיסרון ברור: אין לכם שליטה על איך החנות נראית, והיא תיראה אחרת אצל כל לקוח. לחנות שהעיצוב חשוב לה, זו לא בחירה.
2. גופן משירות חיצוני (Google Fonts וכדומה)
מוסיפים לקוד התבנית קישור לגופן מ־Google Fonts, ומגדירים אותו ב־CSS. יש ב־Google Fonts גופנים עבריים טובים ברישיון פתוח, וזה עובד. שני דברים לשים לב אליהם:
- חיבור חיצוני בכל טעינה. הדפדפן צריך לפתוח חיבור לשרת של גוגל, להוריד את ה־CSS, ואז את קובץ הגופן, לפני שהעברית מוצגת בגופן הנכון. בזמן הזה הטקסט מוצג בגופן זמני ואז "קופץ" (FOUT), או לא מוצג בכלל (FOIT), לפי ההגדרה.
- תחזוקה. זה שינוי בקוד התבנית. כשהתבנית מתעדכנת לגרסה חדשה, השינוי צריך לעבור איתה.
3. גופן בתוך התבנית (אירוח עצמי)
שמים את קובצי הגופן, בפורמט woff2, בתיקיית assets של התבנית ומגדירים @font-face עם asset_url. זו הדרך ששופיפיי מתעדת להעלאת גופנים משלכם. הגופן מוגש אז מאותו מקור כמו שאר העמוד (רשת ה־CDN של שופיפיי), אפשר לטעון אותו מראש (preload) כדי שהעברית תוצג בגופן הנכון כבר בציור הראשון, ואין חיבור לצד שלישי.
היתרון הנוסף: חיתוך (subsetting). קובץ גופן מלא מכיל אלפי תווים. כשמייצרים קובץ שמכיל רק את העברית, הניקוד והסימנים הנחוצים, הקובץ קטן פי כמה, וזה מרגיש בטעינה בטלפון.
מה סלע עושה
סלע נבנתה מההתחלה בידיעה שספריית הגופנים לא תספק את העברית, ולכן היא מפרידה בין שתי משפחות של הגדרות גופן:
- הגופן הלטיני נבחר מספריית שופיפיי, כרגיל.
- הגופנים העבריים מגיעים בתוך קובץ התבנית, כקובצי
woff2חתוכים לעברית, ומוגשים מהחנות שלכם. בעורך בוחרים ביניהם מתוך רשימה, בלי לגעת בקוד: Assistant, Heebo, Rubik ו־Noto Sans Hebrew לטקסט רץ, Frank Ruhl Libre, Suez One ו־Secular One לכותרות. כולם ברישיון פתוח (OFL), והם נטענים רק כשהחנות מוצגת בעברית.
שלוש ערכות העיצוב של סלע מגיעות עם שילוב מוכן: Frank Ruhl Libre עם Assistant ב«עורך», Suez One עם Heebo ב«בית», Secular One עם Noto Sans Hebrew ב«גלריה». אפשר לראות את שלושתם בחנויות הדמו, עלמה, חורש וגלריה־שבע, ואפשר להחליף.
ועצה אחת מתוך מדריך ההתקנה: אל תערבבו יותר משני גופנים עבריים. Suez One ו־Secular One הם גופני תצוגה. הם נראים מצוין בכותרת של שלוש מילים ומעייפים בפסקה שלמה.
איך לבדוק את החנות שלכם עכשיו
לא צריך כלים. פתחו את החנות בטלפון ובמחשב זה לצד זה, והשוו את הכותרת הראשית:
- האנגלית נראית אותו דבר בשניהם, והעברית לא? הגופן שבחרתם לטיני בלבד, והעברית נופלת לגופן המערכת.
- העברית "קופצת" רגע אחרי שהעמוד נטען? הגופן העברי נטען ממקור חיצוני, בלי טעינה מראש.
- העברית נראית אותו דבר בכל מכשיר, מיד? יש לכם גופן עברי שמוגש מהחנות. זה המצב הרצוי.
גופן הוא הדבר הראשון שלקוח רואה ואת האחרון שהוא ישים לב אליו במילים. חנות בעברית שבה העברית היא הטקסט היחיד שלא עוצב מספרת סיפור, ולא זה שרציתם.