Ga naar hoofdinhoud

Google Fonts

  1. Ga naar Google Fonts en kies het lettertype dat je leuk vindt.

  2. Zoek op de lettertypepagina de knop Get font en klik erop.

1

  1. Klik op Get embed code.

2

  1. Selecteer @import.

3

  1. We moeten hier twee delen kopiëren:

4

Deel één

Voor het lettertype dat ik heb gekozen, ziet de insluitcode die Google levert er zo uit:

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

We hoeven alleen het deel na het vraagteken in de URL te kopiëren (rood gemarkeerd in de afbeelding hierboven) en dit te plakken in het veld Google Fonts (Font families) op de plugin-optiepagina. In dit voorbeeld hoef ik alleen family=Noto+Sans+JP:[email protected]&display=swap te kopiëren.

Deel twee

Voor dit lettertype ziet de stijlcode die Google levert er zo uit:

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

We hebben alleen het deel nodig dat in de afbeelding hierboven rood is gemarkeerd.

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

Soms moet je enkele waarden binnen de stijlen invullen. Voor dit lettertype is de waarde voor font-weight bijvoorbeeld <weight>, wat betekent dat je een waarde moet opgeven. Deze placeholders staan meestal tussen <>. Je kunt de bijbehorende waarden vinden op Mozilla.

Voor font-weight kunnen we normal gebruiken.

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

Plak dit in het veld Google Fonts (CSS properties) op de plugin-optiepagina.

  1. Voltooi de instelling.

5

  1. Ga terug naar de videopagina om het toegepaste lettertype te bekijken. De onderstaande afbeelding toont Noto Sans Japanese en Noto Serif Japanese in gebruik.

6