דלג לתוכן הראשי

Google Fonts

  1. היכנסו אל Google Fonts ובחרו את הגופן שאתם אוהבים.

  2. בעמוד הגופן, מצאו ולחצו על הכפתור Get font.

1

  1. לחצו על Get embed code.

2

  1. בחרו @import.

3

  1. אנחנו צריכים להעתיק כאן שני חלקים:

4

חלק ראשון

עבור הגופן שבחרתי, קוד ההטמעה ש-Google מספקת נראה כך:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

אנחנו צריכים להעתיק רק את החלק שאחרי סימן השאלה ב-URL (מודגש באדום בתמונה למעלה) ולהדביק אותו בשדה Google Fonts (Font families) בעמוד אפשרויות התוסף. בדוגמה הזו, אני צריך להעתיק רק את family=Noto+Sans+JP:[email protected]&display=swap.

חלק שני

עבור הגופן הזה, קוד הסגנון ש-Google מספקת נראה כך:

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

אנחנו צריכים רק את החלק שמודגש באדום בתמונה למעלה.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

לפעמים צריך למלא כמה ערכים בתוך הסגנונות. לדוגמה, עבור הגופן הזה, הערך של font-weight הוא <weight>, מה שאומר שעליכם לספק ערך. מצייני מקום כאלה בדרך כלל מוקפים ב-<>. אפשר למצוא ערכים מתאימים ב-Mozilla.

עבור font-weight, אפשר להשתמש ב-normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

הדביקו זאת בשדה Google Fonts (CSS properties) בעמוד אפשרויות התוסף.

  1. השלימו את ההגדרה.

5

  1. חזרו לעמוד הווידאו כדי לראות את הגופן שהוחל. התמונה למטה מציגה את Noto Sans Japanese ואת Noto Serif Japanese בשימוש.

6