Google Fonts — это библиотека бесплатных шрифтов, предоставляемая компанией Google. Она содержит сотни различных шрифтов, которые можно легко подключить к своему веб-сайту. Использование этих шрифтов позволяет разнообразить дизайн сайта и сделать его более уникальным.
Подключение шрифтов Google
Чтобы начать использовать шрифты Google, нужно выполнить следующие шаги:
- Выбор шрифта. Зайдите на сайт fonts.google.com и выберите нужный шрифт. Например, популярный шрифт Roboto.
- Получение кода подключения. После выбора шрифта нажмите кнопку «+ Select this style» рядом с нужным стилем (например, Regular 400). Затем перейдите в меню «Selected families», которое появится внизу страницы, и скопируйте предложенный код.
Есть два способа подключения шрифтов:
- Через
<link>тег в<head>вашего документа. - Через
@importдирективу в вашем CSS-файле.
Вариант 1: Подключение через <link>
Скопированный код будет выглядеть примерно так:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">Добавьте эти строки в секцию <head> вашего HTML-документа.
Вариант 2: Подключение через @import
Если вы предпочитаете подключать шрифты непосредственно в CSS, используйте следующий код:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');Добавьте эту строку в начало вашего CSS-файла.
Применение шрифта
После того как шрифт подключён, вы можете использовать его в своем CSS следующим образом:
body {
font-family: 'Roboto', sans-serif;
}Теперь весь текст на вашем сайте будет отображаться с использованием шрифта Roboto.
Дополнительные настройки
Выбор стилей
Некоторые шрифты имеют различные варианты толщины (например, Regular, Bold, Light и др.). Чтобы подключить определённый стиль, добавьте его вес в URL-адрес шрифта. Например, для подключения жирного варианта шрифта Roboto:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap">Или через @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');Затем примените этот стиль к нужному элементу:
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}Локализация
Если вы хотите, чтобы шрифт поддерживал символы определённого языка, добавьте параметр subset в URL. Например, для поддержки кириллицы:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap&subset=cyrillic">Или через @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap&subset=cyrillic');Пример полного подключения и использования
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Использование шрифтов Google</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<style> body { font-family: 'Roboto', sans-serif; } h1 { font-weight: 700; } </style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это пример использования шрифтов Google.</p>
</body>
</html>Подключение и использование шрифтов Google — простой и эффективный способ улучшить внешний вид вашего сайта. Библиотека предлагает широкий выбор шрифтов, которые могут быть легко интегрированы в любой проект. Экспериментируйте с разными шрифтами и стилями, чтобы найти идеальное сочетание для вашего дизайна!
Загрузка...