Přeskočit na hlavní obsah

Google Fonts

  1. Přejděte na Google Fonts a vyberte si písmo, které se vám líbí.

  2. Na stránce písma najděte a klikněte na tlačítko Get font.

1

  1. Klikněte na Get embed code.

2

  1. Vyberte @import.

3

  1. Zde musíme zkopírovat dvě části:

4

První část

Pro písmo, které jsem vybral, vypadá kód pro vložení poskytnutý Google takto:

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

Potřebujeme zkopírovat pouze část za otazníkem v URL (zvýrazněnou červeně na obrázku výše) a vložit ji do pole Google Fonts (Font families) na stránce nastavení pluginu. V tomto příkladu potřebuji zkopírovat pouze family=Noto+Sans+JP:[email protected]&display=swap.

Druhá část

Pro toto písmo vypadá kód stylu poskytnutý Google takto:

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

Potřebujeme pouze část zvýrazněnou červeně na obrázku výše.

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

Někdy je potřeba doplnit některé hodnoty uvnitř stylů. Například u tohoto písma je hodnota pro font-weight <weight>, což znamená, že musíte zadat hodnotu. Tyto zástupné symboly jsou obvykle uzavřeny v <>. Odpovídající hodnoty najdete na Mozilla.

Pro font-weight můžeme použít normal.

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

Vložte toto do pole Google Fonts (CSS properties) na stránce nastavení pluginu.

  1. Dokončete nastavení.

5

  1. Vraťte se na stránku videa a podívejte se na použité písmo. Obrázek níže ukazuje použití Noto Sans Japanese a Noto Serif Japanese.

6