Gå til hovedindholdet

Google Fonts

  1. Gå til Google Fonts og vælg den skrifttype, du kan lide.

  2. På skrifttypesiden skal du finde og klikke på knappen Get font.

1

  1. Klik på Get embed code.

2

  1. Vælg @import.

3

  1. Vi skal kopiere to dele her:

4

Del et

For den skrifttype, jeg valgte, ser den embed-kode, som Google leverer, sådan ud:

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

Vi skal kun kopiere delen efter spørgsmålstegnet i URL'en (markeret med rødt på billedet ovenfor) og indsætte den i feltet Google Fonts (Font families) på pluginets indstillingsside. I dette eksempel skal jeg kun kopiere family=Noto+Sans+JP:[email protected]&display=swap.

Del to

For denne skrifttype ser den stilkode, som Google leverer, sådan ud:

// <uniquifier>: Brug et unikt og beskrivende klassenavn
// <weight>: Brug en værdi 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 skal kun bruge den del, der er markeret med rødt på billedet ovenfor.

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

Nogle gange skal du udfylde nogle værdier inde i stilarterne. For eksempel er værdien for font-weight for denne skrifttype <weight>, hvilket betyder, at du skal angive en værdi. Disse pladsholdere er normalt omgivet af <>. Du kan finde de tilsvarende værdier på Mozilla.

For font-weight kan vi bruge normal.

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

Indsæt dette i feltet Google Fonts (CSS properties) på pluginets indstillingsside.

  1. Fuldfør opsætningen.

5

  1. Gå tilbage til videosiden for at se den anvendte skrifttype. Billedet nedenfor viser Noto Sans Japanese og Noto Serif Japanese i brug.

6