Vai al contenuto principale

Usare Google Fonts

  1. Vai su Google Fonts e scegli il font che preferisci

  2. Nella pagina del font, trova il pulsante Get font e fai clic su di esso

1

  1. Fai clic su Get embed code

2

  1. Seleziona @import

3

  1. Qui dobbiamo copiare il contenuto di due parti:

4

Prima parte

Per esempio, nel font che ho scelto, il codice di incorporamento fornito da Google è il seguente:

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

Dobbiamo solo copiare la parte dopo il punto interrogativo nell’URL (la parte sottolineata in rosso nell’immagine sopra) e incollarla nel campo Google Fonts (Font families) nella pagina delle impostazioni dell’estensione. In questo esempio, basta copiare family=Noto+Sans+JP:[email protected]&display=swap.

Seconda parte

Per questo font, il codice di stile fornito da Google è il seguente:

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

A noi serve solo la parte evidenziata dal riquadro rosso nell’immagine sopra.

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

A volte alcuni stili richiedono di inserire determinati valori. Ad esempio, in questo font il valore di font-weight è <weight>, il che significa che dobbiamo sostituirlo con un valore reale. Questi campi da compilare sono generalmente racchiusi tra <>. Puoi trovare i valori disponibili corrispondenti su Mozilla.

Per questo font-weight possiamo inserire normal.

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

Incollalo nel campo Google Fonts (CSS properties) nella pagina delle impostazioni dell’estensione.

  1. Completa la configurazione

5

  1. Torna alla pagina del video e vedrai il font applicato. Nell’immagine seguente sono stati usati rispettivamente Noto Sans Japanese e Noto Serif Japanese.

6