Liigu põhisisu juurde

Google Fonts

  1. Minge aadressile Google Fonts ja valige font, mis teile meeldib.

  2. Fondi lehel leidke ja klõpsake nuppu Get font.

1

  1. Klõpsake Get embed code.

2

  1. Valige @import.

3

  1. Siin peame kopeerima kaks osa:

4

Esimene osa

Valitud fondi puhul näeb Google'i pakutav manuskood välja selline:

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

Meil on vaja kopeerida ainult see osa, mis tuleb URL-is pärast küsimärki (ülaloleval pildil punasega esile tõstetud), ja kleepida see plugina seadete lehel väljale Google Fonts (Font families). Selles näites pean kopeerima ainult family=Noto+Sans+JP:[email protected]&display=swap.

Teine osa

Selle fondi puhul näeb Google'i pakutav stiilikood välja selline:

// <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;
}

Me vajame ainult seda osa, mis on ülaloleval pildil punasega esile tõstetud.

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

Mõnikord tuleb stiilides mõned väärtused ise täita. Näiteks selle fondi puhul on font-weight väärtuseks <weight>, mis tähendab, et peate ise väärtuse määrama. Need kohatäited on tavaliselt ümbritsetud märkidega <>. Vastavad väärtused leiate Mozillast.

font-weight puhul saame kasutada väärtust normal.

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

Kleepige see plugina seadete lehel väljale Google Fonts (CSS properties).

  1. Viige seadistus lõpule.

5

  1. Rakendatud fondi nägemiseks minge tagasi videolehele. Allolev pilt näitab kasutuses fonte Noto Sans Japanese ja Noto Serif Japanese.

6