CSS : Comment transformer en classe css le lien de la feuille de style de fonts.google.com vers mon fichier.css (de l'externe vers l'interne ?).

Question

J'ai cette copie à 2 options de fonts.google.com.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap');
</style>

Je veux garder cette police, mais aussi la copier dans mon fichier.css afin d'en faire une classe, comme celle-ci ?

.doneazab {font-family: sans-serif;color: #343434;}

Alors, comment puis-je transformer ce lien de style de police google en une classe ?

Answer 1

Vous devez définir le font-family así:

.doneazab {
  font-family: "Source Sans Pro", sans-serif;
  color: #343434;
}

Si vous visitez l'URL que vous chargez à partir de Google Fonts vous verrez qu'il s'agit d'un fichier CSS avec le code suivant @font-face les déclarations. Toutes ces déclarations définissent le font-family le nom en tant que Source Sans Pro qui vous permettent de faire référence à ce nom ailleurs dans votre CSS.

Ceci est également montré sous l'autre extrait de code de l'application link o @import sur Google Fonts , ex :