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

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

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

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

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

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

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

במסמכי התיעוד של Google Fonts CSS 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 Japan ב-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. כשמשתמשים ב-WebFonts 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.