08.12.2021

Как подключить шрифт с Google Fonts

На примере шрифта Roboto. В HTML код вставляем ссылку на шрифт.

<link 
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
rel="stylesheet">

Далее шрифт прописываем в CSS к нужному элементу, body или к отдельному тегу (на примере H1):

H1 {
font-family: 'Roboto';
}
Полный пример:

<html>

   <head>
      <link 
         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" 
         rel="stylesheet">

   <style>
      H1 {
         font-family: 'Roboto';
      }
   </style>
   </head>

   <body>
      <H1>Заголовок шрифтом Roboto</H1>
   </body>

</html>



Автор проекта: Dimos
Заметки программиста, дизайнера, геймдев-мастера.
Делюсь опытом.