Как использовать Google Fonts на своем сайте

29 ноября, 2022 12:07 пп 134 views | Комментариев нет

| | Комментировать запись

Google Fonts — это бесплатная служба Google, которая обеспечивает доступ к тысячам шрифтов. Все доступные шрифты находятся под лицензиями с открытым исходным кодом, что означает, что их можно бесплатно использовать как в коммерческих, так и в некоммерческих проектах.

В этой статье мы расскажем, как использовать Google Fonts на веб-странице. Смотрите, как сейчас выглядит наша стандартная веб-страница:

Вот ее шаблонная HTML-разметка:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

Выглядит довольно скучно, не так ли? Давайте оживим ее немного при помощи интересных шрифтов. 

Выбор шрифта 

Пришло время выбрать шрифт для нашей страницы. Зайдите на fonts.google.com и выберите понравившийся шрифт, нажав маленькую кнопку +. Мы будем использовать шрифт Karla. После того, как вы выбрали свой шрифт, в правой части страницы появится меню.

Есть два способа импортировать понравившийся шрифт. Первый метод: скопируйте код в поле под меткой Standard. Теперь вернитесь к своей разметке и добавьте скопированный код и тег style в заголовок документа, как показано ниже.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>

  <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

Примечание: Приведенный выше пример URL показывает, что Google Fonts теперь поддерживает свойство font-display.

Если у вас уже есть отдельная таблица стилей CSS, скопируйте код под меткой @import и добавьте его в верхнюю часть таблицы следующим образом.

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

.element {
  /* ... */
}

Использование шрифтов

Итак, мы импортировали шрифт, теперь пришло время попробовать его использовать. Давайте настроим body нашей HTML-разметки на использование шрифта Karla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>

  <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">

  <style>
      body {
        font-family: 'Karla', sans-serif;
      }
  </style>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

Если мы сейчас взглянем на нашу страницу, она будет выглядеть так: 

Теперь она выглядит гораздо лучше. 

Использовать Google Fonts очень просто. Теперь вы можете сделать свой сайт гораздо привлекательнее и красивее. 

Читайте также: 

Tags: , ,

Добавить комментарий