לְעַדְכֵּן: גוגל פשוט הקלה משמעותית על התהליך הזה עם ההשקה שלותצוגה מקדימה של גופנים.

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

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

אם יש לך טיפים להוסיף לגבי השימוש ב-Google Font API, הקפד להשאיר אותם בתגובות.

Google Font API Basics

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

איך זה עובד: @font-face

Google Font API משתמש במאפיין CSS בשם @font-face. אם לא שמעתם על זה בעבר, אל תדאג, רוב האנשים לא - אינך צריך להכיר את זה כדי להשתמש ב-Google Font API.

@font-face מאפשר לך להשתמש בקובצי גופן (יש להם סיומות קבצים כמו .otf ו-.ttf) בדיוק כמו ביישומי שולחן עבודה כגון Microsoft Word או Adobe Photoshop.

הבעיה עם @font-face הייתה שהסוגים השונים של דפדפני אינטרנט דורשים סוגי קבצי גופנים שונים. לדוגמה, Internet Explorer דורש קובץ .eot (סוג פתוח מוטבע), בעוד שדפדפנים כמו Firefox צריכים קובץ .otf (גופן מסוג פתוח). לפיכך, מפתחים המציאו דרכים לעקיפת הבעיה כדי ליישם את @font-face בצורה כזו שפועלת בכל הדפדפנים, כמו שימוש ב-CSS מותנה המשרת את סוג הקובץ המתאים בהתאם לדפדפן האינטרנט של המשתמש.

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

Google Font API פותר את כל הבעיות הללו.

יתרונות השימוש ב-Google Font API

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

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

גופני Google הם קוד פתוח ונבדקו על ידיגוגל. זה אומר שאתה יכול לישון טוב יותר בלילה ולא לדאוג אם תסתבך בגלל השימוש בפונט שלא היית אמור להשתמש בו.

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

אולי היתרון הגדול ביותר של כל זה הוא שזה בחינם. אין תנאים מוקדמים (כגון צורך להירשם או לספק כתובת דואר אלקטרוני) לשימוש ב-Google Font API.

כיצד להשתמש ב-Google Font API

Google Font API הואמתועד היטב, אבל תן לנו לכסות את היסודות של יישום זה באתר שלך.

שימוש בסיסי

ישנם שני שלבים לשימוש ב-Google Font API.

הצעד הראשון הוא להפנות את גיליון הסגנונות CSS שאתה צריך בתוך מסמך ה-HTML שלך; יותר ספציפית בתוך

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

אם יש לך אתר HTML סטטי, תצטרך לחבר את הקוד הזה בכל דפי האינטרנט, או אם יש לך קובץ CSS גלובלי, אתה יכול להשתמש במאפיין @import CSS בתוכו.

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

/>

השלב השני הוא להשתמש ב-CSS כדי לציין כיצד אנו רוצים להשתמש בגופן שביקשנו.

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

נשתמש ב-CSS הבא:

p {

font-family: 'FontName';

גודל גופן: 12px;

}

למי שלא מכיר היטב CSS, זה עוזר לקרוא אותו בקול רם באנגלית פשוטה כדי להבין מה קורה. מה אומר הקוד למעלה: "כל [p]paragraphs צריך להשתמש בגופן של 'FontName' בגודל של 12px."

בקשת סגנונות שונים של גופן

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

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

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

לדוגמה, אם אתה רוצה את הגרסה הנטוי והמודגש של FontName, ההפניה שלך הופכת:

הסגנונות שבהם אתה יכול להשתמש הם נטוי (מודגש או i), מודגש (מודגש או ב), ונטוי מודגש (מודגש או דו).

מבקש מספר גופנים

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

נניח שרצית את הגרסה המודגשת של FontName ואת הסגנון הנטוי של AntotherFontName; הקישור שלנו יהיה:

זה כל מה שיש בזה!

כלים לעבודה עם Google Font API

גוגל יצרה כמה כלים שיעזרו לך לעבוד עם Google Font API, כולל ספריית הפונטים,תצוגה מקדימהו-Web Font Loader. למידע נוסף על כל כלי ספציפי למטה.

1.ספריית גופנים של גוגל

ספריית הגופנים של Google מפרטת את כל הגופנים הזמינים שבהם אתה יכול להשתמש. יש כרגע 18 גופנים זמינים, כמו Droid Sans, Molengo ונוביל. לחיצה על כל תצוגה מקדימה של גופן תחשוף מידע נוסף אודותיו, כולל מעצב הגופן, סוג הרישיון של הגופן, תיאור עבורכם הטיפופילים בחוץ, מערך התווים כולו ועוד. בנוסף, לחיצה על הכרטיסייה "קבל את הקוד" מראה לך את הקוד שאתה יכול להעתיק ולהדביק כדי לגרום לגופן לעבוד.

2.תצוגה מקדימה של גופנים של גוגל

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

3.טוען גופני אינטרנט

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

סדרה נתמכת על ידי בן אנד ג'ריס ג'ו