Как найти URL Google Fonts
Как найти и скопировать URL Google Fonts, чтобы подставить свой шрифт в дизайн favicon. Пошаговая инструкция.
Зачем Google Fonts? Google Fonts удобны тем, что все шрифты на сайте можно бесплатно использовать в коммерческих проектах. Лицензии и отдельные платежи за шрифт в favicon обычно не нужны.
Пошаговая инструкция
Шаг 1: Откройте Google Fonts
В браузере перейдите на fonts.google.com. Это официальный сайт Google Fonts: там тысячи бесплатных шрифтов.
Шаг 2: Выберите шрифт
Просмотрите каталог и нажмите на нужный шрифт. Искать по названию можно в строке вверху страницы.
Шаг 3: Добавьте шрифты в выбор
Когда шрифт понравился, нажмите кнопку "Get font" в правом верхнем углу. Шрифт попадёт в выбор. Так можно добавить несколько семейств: наш генератор умеет грузить несколько шрифтов из одного URL, берите столько, сколько нужно.
Кнопка "Get font" находится в правом верхнем углу
Шаг 4: Откройте выбранные шрифты
Когда набор готов, найдите кнопку "View selected families" справа сверху. На ней бейдж с числом выбранных шрифтов. Нажмите её, затем "Get embed code", чтобы увидеть фрагмент кода.
Нажмите "View selected families", затем "Get embed code"
Диалог с кодом вставки и всеми тегами link
Шаг 5: Скопируйте URL шрифта
Google Fonts покажет несколько тегов link: preconnect и основной stylesheet. Выглядит примерно так:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> Найдите тег link, в URL которого есть css2 — обычно это самый длинный. Скопируйте весь URL из атрибута href (всё между кавычками). Для примера выше URL такой:
https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap Вставьте его в поле «Пользовательский шрифт» нашего генератора favicon. В одном URL уже все выбранные шрифты.
Советы
- Всегда оставляйте в URL параметр &display=swap — так страница грузится быстрее
- Берите только нужные шрифты, чтобы не растягивать загрузку
- Копируйте URL целиком, иначе генератор может не подгрузить шрифты