Fontik

Как подключить шрифт на сайте через CSS

Чтобы показать шрифт на своём сайте, положите его файлы WOFF2 на сервер и подключите их в CSS через @font-face. Посетителям ничего устанавливать не нужно.

Обновлено:

Шаги

  1. Используйте файлы WOFF2: они лёгкие и поддерживаются всеми современными браузерами. В веб-наборе, который можно скачать на странице шрифта, лежат файлы WOFF2 и готовый CSS.
  2. Положите файлы шрифта на свой сервер, например в папку /fonts/.
  3. Объявите шрифт в CSS через @font-face: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Используйте его в стилях и всегда указывайте запасные шрифты: body { font-family: "My Font", system-ui, sans-serif; }
  5. Значение font-display: swap показывает текст сразу запасным шрифтом и заменяет его, когда ваш шрифт загрузится.
  6. Для вариативного шрифта используйте один файл и укажите диапазон насыщенности в @font-face, например font-weight: 100 900.

Советы

  • Предзагрузите основной файл этим тегом в head страницы: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Оставьте только те начертания, которые действительно используете.
  • Отдавайте файлы с того же источника, что и страница, или настройте заголовки CORS, если шрифты лежат на другом домене.
  • Проверьте, что лицензия шрифта разрешает использование на сайтах: у бесплатных шрифтов с открытыми лицензиями это обычно так.

Вопросы

Какие файлы нужны для сайта?

Файлы WOFF2. Они лёгкие и работают во всех современных браузерах; готовые файлы вместе с CSS есть в веб-наборе на странице шрифта.

Нужно ли посетителям устанавливать шрифт?

Нет: браузер сам загрузит шрифт с вашего сервера, как только страница его запросит.

Можно ли использовать шрифт в коммерческом проекте?

Это зависит от лицензии шрифта. Прочитайте её на странице шрифта в каталоге.

Другие инструкции