Подключение шрифта к сайту — это важная часть веб-разработки, которая помогает создать уникальный стиль для вашего ресурса. В этой статье мы рассмотрим подключение шрифта на сайт.
Подключение шрифта через Google Fonts
Google Fonts — это бесплатный сервис, который предоставляет огромное количество шрифтов для использования на веб-сайтах. Подключить шрифт можно очень просто с помощью тега <link> в HTML.
Шаги:
- Перейдите на сайт Google Fonts.
- Выберите шрифт, который вам нужен.
- Нажмите кнопку «Select this font» и скопируйте ссылку для вставки в ваш HTML.
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Это пример текста с шрифтом Roboto.</p>
</body>Подключение шрифта через @font-face
Если шрифт, который вы хотите использовать, не доступен в Google Fonts или вы хотите использовать кастомный шрифт, можно подключить его с помощью правила CSS @font-face. Для этого нужно загрузить шрифт на сервер.
Шаги:
- Загрузите файл шрифта (например,
.woff,.woff2,.ttf) на сервер. - Вставьте следующее правило CSS в ваш файл стилей.
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/my-custom-font.woff2') format('woff2'),
url('fonts/my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}Подключение шрифта через @font-face
Иногда для подключения шрифта достаточно указать его в CSS с использованием свойства font-family. В этом случае шрифт может быть локально доступен на устройстве пользователя или загружен с внешнего источника.
body {
font-family: Arial, Helvetica, sans-serif;
}Если шрифт не найден на устройстве пользователя, браузер автоматически выберет ближайший доступный шрифт из указанного списка.
Заключение
Выбор метода подключения шрифта зависит от ваших предпочтений и нужд проекта. Для большинства случаев Google Fonts — это удобный и быстрый способ, а использование @font-face даёт больше гибкости, если требуется кастомный шрифт.
