דף זה תורגם על ידי Cloud Translation API.

תחילת העבודה עם Google Fonts API

במדריך הזה מוסבר איך להשתמש ב-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 של גיליון סגנונות

כדי לקבוע באיזו כתובת URL להשתמש בקישור של גיליון הסגנונות, התחילו ב-Google כתובת ה-URL הבסיסית של 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`

לדוגמה, כדי לבקש Cantarell גופן נטוי ו-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 querystring:

https://fonts.googleapis.com/css?family=Roboto&display=swap

ציון קבוצות משנה של סקריפטים

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

לדוגמה, כדי לבקש את קבוצת המשנה הקירילית של הגופן Roboto Mono, כתובת האתר להיות:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

כדי לבקש את קבוצת המשנה היוונית של הגופן Roboto Mono, כתובת האתר להיות:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

כדי לבקש קבוצות משנה יווניות וקיריליות של הגופן Roboto Mono, כתובת האתר להיות:

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. עבור לדוגמה, אם אתם משתמשים ב-Inconsolata רק בכותרת של הבלוג, תוכלו להוסיף הכותרת עצמה כערך של text=. כך תיראה הבקשה כמו:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

בדומה לכל מחרוזות השאילתה, צריך לקודד כתובת URL את הערך:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

התכונה הזו פועלת גם בגופנים בינלאומיים, ומאפשרת לציין UTF-8 תווים. לדוגמה, שלום! מיוצגת באופן הבא:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

הפעלת אפקטים של גופנים (בטא)

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

זהו אפקט של גופן!

כדי להשתמש בתכונת הבטא הזו, צריך פשוט להוסיף את effect= לגופנים ב-Google Fonts של בקשת API ולהוסיף את שם המחלקה המתאים לרכיבי ה-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 Multi (צללים מרובים)	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
פיצול	`splintered`	`font-effect-splintered`	Chrome, Safari
סטטי	`static`	`font-effect-static`	Chrome, Safari
Stonewash	`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" וגם לעיין ברבים מהרעיונות שכבר נמצאים באינטרנט!

קריאה נוספת

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