Aller au contenu principal

Utiliser les polices Google

  1. Rendez-vous sur Google Fonts et choisissez une police qui vous plaît

  2. Sur la page de la police, trouvez le bouton Get font et cliquez dessus

1

  1. Cliquez sur Get embed code

2

  1. Sélectionnez @import

3

  1. Ici, nous devons copier le contenu de deux parties :

4

Première partie

Par exemple, pour la police que j’ai choisie, Google fournit ce code d’intégration :

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

Nous avons seulement besoin de copier la partie située après le point d’interrogation dans l’URL (la partie soulignée en rouge dans l’image ci-dessus), puis de la coller dans le champ Google Fonts (Font families) de la page des paramètres de l’extension. Dans cet exemple, je dois simplement copier family=Noto+Sans+JP:[email protected]&display=swap.

Deuxième partie

Pour cette police, Google fournit le code de style suivant :

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

Nous n’avons besoin que de la partie encadrée en rouge dans l’image ci-dessus.

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

Parfois, certains styles nécessitent que vous renseigniez une valeur. Dans cet exemple, la valeur de font-weight est <weight>, ce qui signifie qu’il faut la remplacer par une valeur réelle. En général, les éléments à remplir sont indiqués entre <>. Vous pouvez consulter les valeurs possibles sur Mozilla.

Pour font-weight, nous pouvons par exemple utiliser normal.

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

Collez ensuite ce contenu dans le champ Google Fonts (CSS properties) de la page des paramètres de l’extension.

  1. Terminez la configuration

5

  1. Revenez ensuite à la page de la vidéo pour voir la police appliquée. L’image ci-dessous utilise respectivement Noto Sans Japanese et Noto Serif Japanese.

6