Hoppa till huvudinnehållet

Google Fonts

  1. Gå till Google Fonts och välj det typsnitt du gillar.

  2. På typsnittssidan, hitta och klicka på knappen Get font.

1

  1. Klicka på Get embed code.

2

  1. Välj @import.

3

  1. Vi behöver kopiera två delar här:

4

Del ett

För typsnittet jag valde ser inbäddningskoden som Google tillhandahåller ut så här:

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

Vi behöver bara kopiera delen efter frågetecknet i URL:en (markerad i rött i bilden ovan) och klistra in den i fältet Google Fonts (Font families) på pluginets inställningssida. I det här exemplet behöver jag bara kopiera family=Noto+Sans+JP:[email protected]&display=swap.

Del två

För det här typsnittet ser stilkoden som Google tillhandahåller ut så här:

// <uniquifier>: Använd ett unikt och beskrivande klassnamn
// <weight>: Använd ett värde från 100 till 900

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

Vi behöver bara delen som är markerad i rött i bilden ovan.

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

Ibland behöver du fylla i vissa värden i stilarna. Till exempel, för det här typsnittet är värdet för font-weight <weight>, vilket betyder att du behöver ange ett värde. Dessa platshållare omges vanligtvis av <>. Du kan hitta motsvarande värden på Mozilla.

För font-weight kan vi använda normal.

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

Klistra in detta i fältet Google Fonts (CSS properties) på pluginets inställningssida.

  1. Slutför inställningen.

5

  1. Gå tillbaka till videosidan för att se det tillämpade typsnittet. Bilden nedan visar Noto Sans Japanese och Noto Serif Japanese i användning.

6