Как самостоятельно разместить веб-шрифт с Google Fonts

Обычно веб-шрифты берут с Google Fonts. Не вставляйте готовый код оттуда — скачайте файлы шрифтов и разместите их на своём сервере.

ВАЖНО: Это не юридическая консультация. Я не ваш юрист.

Шаги:

-1. Убедитесь, что использование шрифта соответствует лицензии. 0. Скачайте шрифт:

• Найдите нужный шрифт на Google Fonts.
• Нажмите «Get font» → «Get embed code» (не копируйте код).
• Выберите нужные настройки.
• Скопируйте URL из атрибута href в предоставленном HTML (например, https://fonts.googleapis.com/css2?family=Fira+Code&display=swap).
• Скачайте этот CSS-файл и все файлы шрифтов, на которые он ссылается.
• Поместите файлы в папку с версией (например, /Assets/Fira/Code/2025-8-13/).
• Измените CSS: замените абсолютные ссылки на относительные (например, src: url(uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');).

1. Добавьте лицензию: Найдите лицензию шрифта через Google Fonts (раздел «License») и сохраните её в файле.
2. Добавьте HTML:

   <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="preload">
   <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="stylesheet">
   

3. Добавьте CSS:

   code {
       font-family: "Fira Code", monospace;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
   }
   

4. Укажите ссылку на лицензию и соблюдайте её условия.

Пример реализации можно посмотреть здесь.

---

Atom Feed
Контакты: velocifyer@veloicfyer.com (поменяйте местами «i» и «C» в домене).
Лицензия: CC-BY-SA 4.0, кроме favicon, JavaScript и шрифтов.
Исходный код блога на Codeberg.