Блог

У меня есть этот вариант 2 копировать из 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;400amp;display=swap" rel="stylesheet">

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

Я хочу сохранить этот шрифт, но также скопировать в мой file.css, чтобы создать класс, такой как этот?

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

Итак, как я могу преобразовать эту ссылку в стиле шрифта Google в класс?

Вы захотите установить font-family , например, так:

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

Если вы перейдете по URL-адресу, который вы загружаете из Google Fonts, вы увидите, что это файл CSS с @font-face объявлениями. Все эти объявления определяют font-family имя как Source Sans Pro , что позволяет вам ссылаться на это имя в другом месте вашего CSS.

Это также показано под другим фрагментом кода для link или @import в Google Fonts, например: