Как выкачать ВСЕ шрифты с Google Fonts?
Еще хорошо бы по категориям (serif, sans serif, display, mono, handwriting), и конечно же со всеми начертаниями и языками.
Хочу их загрузить в Nexus Font из-за того, что когда эта программа включена, шрифты не требуют установки — продукты Adobe подхватывают их на лету. Удобно выбирать шрифты и устанавливать только при необходимости. А сейчас приходится сначала пролистывать google fonts, добавлять в копилку понравившиеся, потом в копилке прокликивать все галки с начертаниями каждого шрифта, всё это дело скачивать, распаковывать, закидывать в нексус. геморрой
- Вопрос задан более трёх лет назад
- 8470 просмотров
- Вконтакте
- Вконтакте
В общем как всегда в случае с гуглом — получилась наполовину туфта. На гитхабе нет многих шрифтов с официальной страницы сервиса и наоборот. Так же на гитхабе они не рассортированы по категориям Serif / Sans serif / Display / Handwriting / MonoSpace, про поддерживаемые языки вообще молчу.
Казалось бы, можно быстренько перетыкать все шрифты из нужной категории на fonts.google.com и скачать архивчик, но нет. Сервис отдает шрифты по какому-то своему усмотрению. Иногда не более 14 за раз. Иногда только пары-тройки не достает. Сверять списки из архива и на сайте — проблематично, т.к. на сайте список скачиваемых шрифтов тоже хз как сортируется, на первый взгляд вроде как в обратном алфавитном порядке, ан нет — затесается какой-то шрифт не в свое место.
Короче в итоге я просто вручную сверил категории на сайте и распихал шрифты с гитхаба по категориям, при необходимости скачивая недостающие, а потом еще и лишние просмотрел и тоже рассортировал — мусора там было полно (не отображаются ни латиница, ни кириллица, ни китаеца-азиатица или как там это называют), но кое какие шрифты работают.
Как подключить шрифт из Google Fonts или AllFont
У нас нет возможности загрузить свой файл шрифта, но можно подключить его с других сервисов, например:
Заметка: шрифт можно подключить, только если он есть на одном из этих ресурсов и является бесплатным. В целом, подключение шрифта, которого нет у нас в этом списке
Добавляем шрифт с fonts.google.com
1. Находите нужный вам шрифт или ближайший, похожий к нему, предварительно можете отфильтровать и выбрать только Cyrillic.
2. Нажимаете на окошко с нужным шрифтом:
/>
3. Нажимаете на кнопку с плюсиком
4. Копируете ссылку:
5. И добавляете ее в плагин "Свой код", в поле "Перед </head>".
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин “Свой код”
Код добавляете в поле Код перед </body>
Аналогично предыдущему коду, добавляете код из инструкции ниже в HEAD, сразу после предыдущего скрипта, но предварительно данное CSS свойство нужно добавить в специальные тэги и добавить !important для повышения приоритета собственных стилей.
В итоге получится такая конструкция (Код из Google Fonts + код из инструкции):
Пример в плагине инструкции с шрифтом: ‘Reggae One’, обратите внимание, что у вас будет свое название шрифта в параметре font-family: ‘Название вашего шрифта’ , получить его можно там же, где и код в шаге 4 (cм скриншот ниже). Например смотрим название для шрифта Merriweather
Меняем в коде строчку: font-family: ‘Reggae One’, cursive !important;
на font-family: ‘Merriweather’, cursive !important;
6. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.
Публикуете станицу или же выполняете предпросмотр. В результате у текста начинает отображаться выбранный вами шрифт.
Если вы сделали все шаги, но шрифт так и не изменился, в конце инструкции есть самые частые ошибки, которые допускаются в процессе настройки.
Добавляем шрифт с allfont.ru
- Переходим на сайт https://allfont.ru/ и открываем понравившийся шрифт
- На странице шрифта находим ссылку на сам шрифт и открываем его
- Копируем все что начинается с @font-face
- Теперь добавляем скопированный код в плагин Свой код — Код перед </head>
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин “Свой код”
Код добавляете в поле Код перед </body>
5. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.
/>
Столкнулись с трудностями при подключении?
Обратите внимание на код плагина, иногда при копировании можно случайно добавить спецсимволы, которые повлияют на работу кода, достаточно их просто удалить или скопировать код предварительно в текстовый блокнот:
Шрифт загружается на опубликованной странице, проверять нужно на ней, в редакторе он останется таким же
Не забывайте, что шрифт срабатывает по ранее настроенному классу, каждому текстовому виджету нужно прописать класс если он должен быть с вашим шрифтом.
Как скачать шрифт с Google Fonts
Google Fonts — отличная коллекция шрифтов, которые получили не малый спрос среди вебмастеров, а они в свою очередь используют их на своих сайтах. Но, нам стало известно, что скачать шрифты можно на свой компьютер, сразу после чего имеется возможность использовать их как в графических редакторах так и в текстовых, к примеру Paint или в Microsoft Office. Сегодня обсудим один из способов загрузить шрифты на свой персональный компьютер.
Самый простой способ получения шрифтов от компании Google не требует скачивания или установки каких либо сторонних программ. Все действия по загрузке шрифтов происходят прямо на сайте — http://www.google.com/webfonts. На данный момент, у Google имеется около 700 различных видов шрифта на любой из Ваших вкусов и потребностей.
Но как быть если нам необходимо определенный шрифт, а известно только его название. Не искать же его в списке из 700 шрифтов, конечно нет. Все максимально просто, вам нужно ввести всего лишь название в строку поиска по шрифтам, после чего сайт выдаст именно то, что вы ищите.
Как только найдете привлекательный или необходимый шрифт, следует кликнуть по кнопке «Add to Collection», тем самым добавив тот или иной шрифт в свою коллекцию. Таким образом можно добавить несколько десятков шрифтов, возможно больше, в общем столько, сколько вам необходимо.
Как только собралась та коллекция шрифтов, которой будет достаточно, следует кликнуть по кнопке «Download» по средствам чего мы и скачаем необходимый нам список шрифтов на свой компьютер.
За действием, описанным выше, следует выбрать способ скачивания нашего списка шрифтов. Но, как мы помним, мы не собираемся использовать какие-либо программы, а это значит, что следует выбрать способ с названием «Collection as a ZIP file».
После того, как архив с нашими шрифтами загрузился на компьютер, следует его разархивировать и открыть папку. В данной папке выбираем один из шрифтов и кликаем на нем левой кнопкой мыши (ЛКМ), после чего выбираем пункт «Установить шрифт».
На этом данный способ заканчивается, а шрифты, которые мы впоследствии установим, станут доступны во всех приложениях, где есть возможность выбора шрифта.
➢Использование шрифта с Google Fonts или fontlibrary.org:
Убедитесь, что шрифт поддерживает кириллицу — внизу на странице можно увидеть соответствующие буквы.
fontlibrary.org:
Google Fonts:
Для Google Fonts нужно выбрать стиль шрифта по кнопке «Select this style» и перейти на вкладку «Embed» в открывшейся панели справа:
В fontlibrary.org нужный код можно найти в правом столбце, после выбора понравившегося шрифта:
Осталось скопировать код(1) и название шрифта(2) в настройки виджета, чтобы завершить установку. Название шрифта копируется без кавычек. Сохраняем изменения и публикуем страницу.
Готово! Мы подключили сторонний шрифт. ✅
➢Загрузка своего шрифта на fontlibrary.org:
❗Важно: Загружая на fontlibrary.org шрифт, вы позволяете его использовать другим пользователям сервиса. Убедитесь, что ваша лицензия на шрифт позволяет это сделать.
Перед загрузкой проверьте, чтобы шрифт уже не находился на одном из вышеуказанных сервисов.
Сначала необходимо зарегистрироваться по ссылке https://fontlibrary.org/ru/up После этого войдите в аккаунт.
Загрузка шрифта осуществляется на странице https://fontlibrary.org/ru/create/.
Название и описание должно быть указано на английском языке.
Категория: serif — шрифт с засечками, sans-serif — без засечек.
Шрифт в формате OTF или TTF должен быть упакован в ZIP-архив. Если у вас нет программы для архивирования, используйте онлайн-сервис. Например, https://sanstv.ru/zip.
Если шрифт корректный, то после нажатия на кнопку «CREATE» появится ссылка на загруженный шрифт, который устанавливается на страницу с помощью переноса кода(1) и названия(2) в наш HTML-виджет.
Включаем нужную опцию в настройках HTML-виджета:
1. Все виджеты «Текст». Шрифт будет у всех виджетов «Текст»
2. Заголовки. Шрифт будет у всех виджетов «Заголовок».
3. Секции и виджеты с классом extfont. У нужных виджетов и секций указываем класс extfont, чтобы применить его для этих элементов страницы.
❗ Шрифт отобразится только на опубликованной странице.
❗ Не работает для всплывающих окон, если класс указывается у кнопки или у секции, в которой находится кнопка с окном.
4. Весь текст на странице. Выбранный шрифт будет применен для текста во всех виджетах, в том числе и во всплывающих окнах.
На вкладке «Прочие» доступны дополнительные настройки:
Насыщенность. Шрифт может быть жирнее или тоньше обычного начертания.
У всех шрифтов поддерживаются значения 400 (обычный вид шрифта) и 700 (жирный шрифт). Чем больше это значение, тем «толще» шрифт.
Если выбранное значение не поддерживается, то шрифт будет с ближайшим значением (400 или 700).
Запасной шрифт. Если код или название шрифта с ошибками, то будет использован этот шрифт.
❗Важно: для корректной работы рекомендуется использовать только один такой виджет на странице.