במדריך הזה מוסבר איך להשתמש ב-Google Fonts API כדי להוסיף גופנים לדפי האינטרנט. לא צריך תכנות; כל מה שצריך לעשות הוא להוסיף קישור גיליון סגנונות מיוחד למסמך ה-HTML, ולאחר מכן להפנות לגופן בסגנון CSS.
דוגמה קצרה
נראה דוגמה. מעתיקים ומדביקים את קוד ה-HTML הבא בקובץ:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
לאחר מכן, פותחים את הקובץ בדפדפן אינטרנט מתקדם. אתם אמורים לראות דף שמציג את הפריטים הבאים בגופן שנקרא Tangerine:
המשפט הזה הוא טקסט רגיל, כך שאפשר לשנות את המראה שלו באמצעות CSS. נסו להוסיף צל לסגנון בדוגמה הקודמת:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
עכשיו אמורה להופיע הטלת צללית מתחת לטקסט:
וזו רק ההתחלה של מה שאפשר לעשות עם Fonts API ו-CSS.
סקירה כללית
כדי להתחיל להשתמש ב-Google Fonts API צריך לבצע שני שלבים בלבד:
הוסף קישור לגיליון סגנונות כדי לבקש את גופני האינטרנט הרצויים:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
עיצוב רכיב עם גופן האינטרנט המבוקש, בגיליון סגנונות:
.css-selector { font-family: 'Font Name', serif; }או עם סגנון בתוך השורה על הרכיב עצמו:
<div style="font-family: 'Font Name', serif;">Your text</div>
לרשימת הגופנים שבהם אפשר להשתמש, אפשר לעיין ב-Google Fonts.
ציון משפחות גופנים וסגנונות בכתובת URL של גיליון סגנונות
כדי לקבוע באיזו כתובת אתר להשתמש בקישור לגיליון הסגנונות, התחל בכתובת האתר הבסיסית של Google Fonts API:
https://fonts.googleapis.com/css
לאחר מכן, מוסיפים את הפרמטר של כתובת האתר family=, עם שם וסגנון אחד או יותר של משפחת גופנים.
לדוגמה, כדי לבקש את הגופן Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
כדי לבקש כמה משפחות גופנים, צריך להפריד בין השמות באמצעות קו אנכי (|).
לדוגמה, כדי לבקש את הגופנים Tangerine, Inconsolata ו-Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
בקשה של מספר גופנים מאפשרת לכם להשתמש בכל הגופנים האלה בדף. (אבל לא כדאי להגזים. ברוב הדפים אין צורך בגופנים רבים, ובקשה של הרבה גופנים עלולה להאט את מהירות הטעינה של הדפים).
כברירת מחדל, Google Fonts API מספק את הגרסה הרגילה של הגופנים המבוקשים. אם רוצים לבקש סגנונות או משקולות אחרים, מוסיפים נקודתיים (:) לשם הגופן ואחריו רשימה של סגנונות או משקולות שמופרדים בפסיקים (,).
לדוגמה:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
כדי לבדוק אילו סגנונות ומשקולות זמינים לכל גופן, עיינו ברישום של הגופן ב-Google Fonts.
לכל סגנון שתבקשו, תוכלו לציין את השם המלא או קיצור. אפשר לציין גם משקל מספרי:
| סגנון | מפרטים |
|---|---|
| נטוי | italic או i |
| מודגש | bold או b או משקל מספרי כמו 700 |
| מודגש נטוי | bolditalic או bi |
לדוגמה, כדי לבקש גופן נטוי ו-Droid Serif מודגש, תוכלו להשתמש בכל אחת מכתובות ה-URL הבאות:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
שימוש בתצוגה של גופנים
font-display מאפשר לכם לקבוע מה יקרה כשהגופן לא יהיה זמין. בדרך כלל מומלץ לציין ערך שאינו ערך ברירת המחדל auto.
מעבירים את הערך הרצוי בפרמטר display של מחרוזת השאילתה:
https://fonts.googleapis.com/css?family=Roboto&display=swap
ציון קבוצות משנה של סקריפט
חלק מהגופנים ב-Google Font Directory תומכים במספר סקריפטים (כמו לטינית, קירילית ויוונית, למשל). כדי לציין את קבוצות המשנה שרוצים להוריד, צריך לצרף את פרמטר קבוצת המשנה לכתובת ה-URL.
לדוגמה, כדי לבקש קבוצת משנה קירילית של הגופן Roboto Mono, כתובת ה-URL תהיה:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
כדי לבקש קבוצת משנה יוונית של הגופן Roboto Mono, כתובת ה-URL תהיה:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
כדי לבקש שימוש בקבוצות משנה יווניות וקיריליות של הגופן Roboto Mono, כתובת ה-URL צריכה להיות:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
קבוצת המשנה הלטינית תמיד נכללת אם היא זמינה ואין צורך לציין אותה. שימו לב שאם דפדפן לקוח תומך ב-unicode-range (http://caniuse.com/#feat=font-unicode-range), המערכת מתעלמת מהפרמטר של קבוצת המשנה. הדפדפן יבחר מתוך קבוצות המשנה שנתמכות על ידי הגופן כדי לקבל את מה שהוא צריך כדי לעבד את הטקסט.
ב-Google Fonts תוכלו למצוא רשימה מלאה של הגופנים וקבוצות המשנה של הגופנים.
אופטימיזציה של בקשות הגופנים
הרבה פעמים, כשרוצים להשתמש בגופן אינטרנט באתר או באפליקציה, יודעים מראש לאילו אותיות צריך להשתמש. זה קורה בדרך כלל כשמשתמשים בגופן אינטרנט בלוגו או בכותרת.
במקרים כאלה מומלץ לציין את הערך text= בכתובת ה-URL של בקשת הגופן. כך Google יכולה להחזיר קובץ גופן שעבר אופטימיזציה לבקשה שלכם. במקרים מסוימים, הגדרה זו עשויה להקטין את גודל קובץ הגופן בשיעור של עד 90%.
כדי להשתמש בתכונה הזו, פשוט מוסיפים text= לבקשות של Google Fonts API. לדוגמה, אם משתמשים ב-Inconolata רק ככותרת של הבלוג, אפשר להוסיף את הכותרת עצמה כערך של text=. הבקשה תיראה כך:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
בדומה לכל מחרוזות השאילתה, צריך לקודד את הערך באמצעות URL:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
התכונה הזו פועלת גם בגופנים בינלאומיים ומאפשרת לציין תווי UTF-8. לדוגמה, "Hola! " מיוצג כך:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
הפעלת אפקטים של גופנים (בטא)
בעת יצירת כותרות או טקסטים לתצוגה באתר, לעתים קרובות רצוי לסגנן את הטקסט בצורה דקורטיבית. כדי לפשט את תהליך העבודה שלכם, Google סיפקה אוסף של אפקטים של גופנים שאפשר להשתמש בהם בכמה שפחות מאמץ כדי ליצור טקסט יפהפה לתצוגה. לדוגמה:
כדי להשתמש בתכונת הבטא הזו, פשוט מוסיפים את effect= לבקשת ה-API של Google Fonts ומוסיפים את שם המחלקה המתאים לרכיבי ה-HTML שרוצים להשפיע. בדוגמה שלמעלה השתמשנו באפקט הגופן shadow-multiple,
כך שהבקשה תיראה כך:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
כדי להשתמש באפקט, מוסיפים את שם המחלקה המתאים לרכיבי ה-HTML.
שם המחלקה המתאים הוא תמיד שם האפקט המתחיל ב-font-effect-,
כך ששם המחלקה של shadow-multiple יהיה font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
אפשר לבקש כמה אפקטים על ידי הפרדה בין שמות האפקטים באמצעות קו אנכי (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
לפניכם פירוט מלא של כל האפקטים שאנחנו מציעים לגופנים:
| השפעה | שם ה-API | שם הכיתה | תמיכה |
|---|---|---|---|
| אנגליף | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| שלט לבנים | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| הדפסה על קנבס | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| רעידות | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| הרס | destruction |
font-effect-destruction |
Chrome, Safari |
| מצוקה | distressed |
font-effect-distressed |
Chrome, Safari |
| עץ במצוקה | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| אמבוס | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| אש | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| אנימציית אש | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| שביר | fragile |
font-effect-fragile |
Chrome, Safari |
| דשא | grass |
font-effect-grass |
Chrome, Safari |
| קרח | ice |
font-effect-ice |
Chrome, Safari |
| מיטוזיס | mitosis |
font-effect-mitosis |
Chrome, Safari |
| נאון | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| Outline | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| ירוק | putting-green |
font-effect-putting-green |
Chrome, Safari |
| פלדה מאולצת | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| הצללה משולבת | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| פיצול | splintered |
font-effect-splintered |
Chrome, Safari |
| סטטי | static |
font-effect-static |
Chrome, Safari |
| שטיפת אבן | stonewash |
font-effect-stonewash |
Chrome, Safari |
| תלת ממד | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| מצב צף תלת-ממדי | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| וינטג' | vintage |
font-effect-vintage |
Chrome, Safari |
| טפט | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
יש עוד הרבה דרכים לסגנן את הגופנים, ואפשר לעשות הרבה באמצעות CSS. אנחנו רק מספקים כמה רעיונות בתור התחלה. לקבלת רעיונות נוספים, נסה את החיפוש ב-Google "css texts" ועיין ברבים מהרעיונות שכבר נמצאים באינטרנט!
קריאה נוספת
- מומלץ לעיין ברשימה המלאה של משפחות הגופנים שמסופקות על ידי Google Fonts API ב-Google Fonts.
- ראו איך משתמשים ב-Web Font Loader כדי לקבל יותר שליטה בטעינת גופנים.
- מידע נוסף על אופן הפעולה של Google Fonts API מופיע בדף שיקולים טכניים.