Hopp til hovedinnhold

Google Fonts

  1. Gå til Google Fonts og velg skrifttypen du liker.

  2. På siden for skrifttypen finner du og klikker på knappen Get font.

1

  1. Klikk på Get embed code.

2

  1. Velg @import.

3

  1. Vi må kopiere to deler her:

4

Del én

For skrifttypen jeg valgte, ser innbyggingskoden fra Google slik ut:

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

Vi trenger bare å kopiere delen etter spørsmålstegnet i URL-en (markert med rødt i bildet over) og lime den inn i feltet Google Fonts (Font families) på pluginens innstillingsside. I dette eksemplet trenger jeg bare å kopiere family=Noto+Sans+JP:[email protected]&display=swap.

Del to

For denne skrifttypen ser stilkoden fra Google slik ut:

// <uniquifier>: Bruk et unikt og beskrivende klassenavn
// <weight>: Bruk en verdi fra 100 til 900

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

Vi trenger bare delen som er markert med rødt i bildet over.

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

Noen ganger må du fylle inn noen verdier i stilene. For eksempel er verdien for font-weight <weight> for denne skrifttypen, noe som betyr at du må oppgi en verdi. Disse plassholderne er vanligvis omsluttet av <>. Du finner tilsvarende verdier på Mozilla.

For font-weight kan vi bruke normal.

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

Lim dette inn i feltet Google Fonts (CSS properties) på pluginens innstillingsside.

  1. Fullfør oppsettet.

5

  1. Gå tilbake til videosiden for å se den brukte skrifttypen. Bildet nedenfor viser Noto Sans Japanese og Noto Serif Japanese i bruk.

6