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

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

Jimmy Mooney

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

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

באמצעות Google Fonts CSS API, האתר שלכם יכול לבקש רק את נתוני הגופנים הדרושים לו כדי שזמן הטעינה של ה-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 עשוי להפחית את העברות הקבצים בערך 90%. באמצעות מתאר unicode-range ניתן להגדיר כל חלק בנפרד, ולהוריד כל פרוסה רק כאשר התוכן מכיל אחד מהתווים שבטווחי התווים האלה.

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

• אירוח עצמי של קובצי WOFF2 משלכם.
• משתמשים ב-CSS API כדי לאחזר את WOFF2.
• משתמשים ב-CSS API שבו הפרמטר text= מוגדר כ-' “““ הסימון“ち”, ”.

בדוגמה הזו, ניתן לראות שהשימוש ב-CSS API כבר חוסך 97.5% בהשוואה לאירוח עצמי של גופן 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. כאשר אתם משתמשים ב-WebFont 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.