ממשק API עבור גופני אינטרנט מהירים ויפים

איך משתמשים ב-Google Fonts CSS API כדי להציג גופנים לאינטרנט ביעילות.

Jimmy Mooney

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

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

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

כל זה קורה על ידי הכללת שורה אחת של HTML בקוד.

איך משתמשים ב-Google Fonts CSS API

במסמכי התיעוד של Google Fonts API יש סיכום יפה בנושא:

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

הדבר המינימלי שצריך לעשות הוא לכלול שורה אחת ב-HTML, כך:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

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

  1. אם הבקשה שלכם כוללת פרמטרים נפוצים שכבר יש ל-API קבצים בשבילם, המערכת תחזיר מיד CSS למשתמש ותפנה אותו לקבצים האלה.
  2. אם מבקשים גופן עם פרמטרים שכרגע לא שמורים במטמון של ה-API, המערכת תיצור קבוצת משנה של הגופנים בזמן אמת, באמצעות HarfBuzz כדי לעשות זאת במהירות, ותחזיר קובץ CSS שמצביע עליהם.

קובצי גופנים יכולים להיות גדולים, אבל הם לא חייבים להיות כאלה

גופני אינטרנט יכולים להיות גדולים, זה נכון. רק גופן אחד של Noto Sans Japanese ב-WOFF2 הוא כמעט 3.4MB – והורדה של הגופן הזה לכל אחד מהמשתמשים שלכם תגרום להאטה בזמן הטעינה של הדף. כשכל אלפית שנייה חשובה וכל בייט יקר, חשוב לוודא שאתם טוענים רק את הנתונים שהמשתמשים שלכם צריכים.

Google Fonts CSS API יכול ליצור קובצי גופנים קטנים מאוד (שנקראים קבוצות משנה), שנוצרים בזמן אמת, כדי להציג למשתמשים רק את הטקסט והסגנונות שנדרשים על ידי האתר שלכם. במקום להציג גופן שלם, אפשר לבקש תווים ספציפיים באמצעות הפרמטר text.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

טבלה עם מספר התווים בלטינית בסיסית, ביוונית בסיסית וביונית מורחבת.

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

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

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

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

שימוש ב-CSS API וב-unicode-range יכול להפחית את העברות הקבצים בכ-90%. באמצעות התיאור unicode-range, אפשר להגדיר כל חלק בנפרד, וכל פרוסה תוריד רק אם התוכן מכיל אחד מהתווים בטווחי התווים האלה.

דוגמה: אם רוצים להגדיר רק את המילה "מתחילים}{} ち及" ב- Noto Sans JP, אפשר לבצע את הפעולות הבאות:

  • אירוח עצמאי של קובצי WOFF2.
  • משתמשים ב-CSS API כדי לאחזר את קובץ ה-WOFF2.
  • משתמשים ב-CSS API עם הפרמטר text= שמוגדר לערך 'שלום'.

תרשים עם השוואה בין שיטות שונות להורדת Noto Sans JP.

בדוגמה הזו אפשר לראות שכבר חוסכים 97.5% באמצעות השימוש ב-CSS API בהשוואה לאירוח עצמי של גופן WOFF2, הודות לתמיכה המובנית של ה-API בהפרדת גופנים גדולים לטווח Unicode. אם תרחיבו את ההגדרה ותציינו בדיוק את הטקסט שרוצים להציג, תוכלו להקטין עוד יותר את גודל הגופן ל-95.3% בלבד מגודל הגופן של CSS API – קטן ב-99.9% מהגוף שמתארח בעצמו.

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

הכנה לעתיד של גופן האינטרנט באמצעות Google Fonts CSS API

צוות Google Fonts תורם גם לתקנים חדשים של W3C שממשיכים לחדש בטכנולוגיות של גופנים לאינטרנט, כמו WOFF2. אחד מהפרויקטים הנוכחיים הוא מעבר מצטבר של גופנים, שמאפשר למשתמשים לטעון חלקים קטנים מאוד של קובצי גופנים כשהם נמצאים בשימוש על גבי המסך ולהעביר אותם בסטרימינג על פי דרישה. הוא גבוה יותר מהביצועים של unicode-range. כשמשתמשים ב-Web Fonts API, המשתמשים מקבלים את השיפורים הבסיסיים האלה בטכנולוגיית העברת הגופנים כשהם הופכים לזמינים בדפדפן שלהם.

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

גופנים משתנים תומכים ב-

גופנים משתנים הם קובצי גופנים שיכולים לאחסן מגוון של וריאציות עיצוב במספר צירים. הגרסה החדשה של Google Fonts CSS API כוללת תמיכה בהם. הוספת ציר נוסף של וריאציה מאפשרת גמישות חדשה בגופן – אבל היא יכולה להכפיל כמעט את הגודל של קובץ הגופן.

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

פשוט ליישום, מותאם לכם

בעזרת Google Fonts CSS API תוכלו להציג גופנים:

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

מידע נוסף על Google Fonts זמין בכתובת fonts.google.com. מידע נוסף על CSS API זמין במסמכי התיעוד של ה-API.

תודות

תמונה ראשית (Hero) של leesehee.