Fara í aðalefni

Google Fonts

  1. Farðu á Google Fonts og veldu leturgerðina sem þér líkar.

  2. Á síðu leturgerðarinnar skaltu finna og smella á hnappinn Get font.

1

  1. Smelltu á Get embed code.

2

  1. Veldu @import.

3

  1. Við þurfum að afrita tvo hluta hér:

4

Hluti eitt

Fyrir leturgerðina sem ég valdi lítur innfellingarkóðinn sem Google útvegar svona út:

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

Við þurfum aðeins að afrita hlutann á eftir spurningarmerkinu í slóðinni (auðkenndur með rauðu á myndinni hér að ofan) og líma hann inn í reitinn Google Fonts (Font families) á valkostasíðu viðbótarinnar. Í þessu dæmi þarf ég aðeins að afrita family=Noto+Sans+JP:[email protected]&display=swap.

Hluti tvö

Fyrir þessa leturgerð lítur stílakóðinn sem Google útvegar svona út:

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

Við þurfum aðeins hlutann sem er auðkenndur með rauðu á myndinni hér að ofan.

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

Stundum þarftu að fylla inn einhver gildi inni í stílunum. Til dæmis er gildið fyrir font-weight í þessari leturgerð <weight>, sem þýðir að þú þarft að gefa upp gildi. Þessir staðgenglar eru venjulega innan <>. Þú getur fundið samsvarandi gildi á Mozilla.

Fyrir font-weight getum við notað normal.

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

Límdu þetta inn í reitinn Google Fonts (CSS properties) á valkostasíðu viðbótarinnar.

  1. Ljúktu uppsetningunni.

5

  1. Farðu aftur á myndbandssíðuna til að sjá leturgerðina sem hefur verið beitt. Myndin hér að neðan sýnir Noto Sans Japanese og Noto Serif Japanese í notkun.

6