Как скачать шрифт с 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
Google Fonts \u2013 \u0441\u0435\u0440\u0432\u0438\u0441 Google \u0441 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 1000 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c , \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0430 \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 Word \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445, \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435 \u0438\u043b\u0438 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Canva . \u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435 «>>]>
Если Вы часто используете Word для создания текстов и документов, то могли заметить, что этот самый распространённый текстовый редактор имеет достаточно ограниченный выбор шрифтов. Arial, Times New Roman и Calibri и несколько других – и на этом его возможности заканчиваются. Если же Вы хотите попробовать использовать новые, современные и оригинальные шрифты, мы знаем, где их найти: Google Fonts предоставляет сотни необычных шрифтов для загрузки и бесплатного использования. Рассказываем подробнее, как их получить.
Что такое Google Fonts?
Как искать шрифты в Google Fonts
Чтобы найти шрифт, который Вам больше всего подходит, зайдите на веб-сайт Google Fonts. Вверху домашней страницы Вы увидите поле поиска (Search), поле для ввода фразы, которую Вы хотите написать (Type something), и размер шрифта.
Поиск по типам/категориям шрифтов (Categories)
- Serif: самый классический, в стиле Times New Roman, с орнаментом на концах.
- Sans Serif: проще, без излишеств и обычно более современно.
- Display: специальные стили для заголовков.
- Handwriting (другое название: Script): курсив, имитирующий почерк.
- Monospace: с одинаковым пробелом для каждого символа и между символами, в отличие от других шрифтов, где пробел может изменяться.
По языку ( Language )
По свойствам шрифта ( Font properties )
Как скачать шрифты из Google Fonts
Загрузить один или несколько шрифтов из Google Fonts очень просто. Для начала нажмите на шрифт, который Вас интересует. Здесь мы, в качестве примера, выбираем шрифт Shadows into Light:
Чтобы загрузить его на свой компьютер, нажмите кнопку в правом верхнем углу экрана (Download family).
Как подключить шрифт из 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 или AllFont
У нас нет возможности загрузить свой файл шрифта, но можно подключить его с других сервисов, например:
- https://fonts.google.com/
- http://allfont.ru/
Заметка: шрифт можно подключить, только если он есть на одном из этих ресурсов и является бесплатным. В целом, подключение шрифта, которого нет у нас в этом списке
Выглядит следующим образом:
1. Находите нужный вам шрифт или ближайший, похожий к нему, предварительно можете отфильтровать и выбрать только Cyrillic .
2. Нажимаете на окошко с нужным шрифтом:
3. Нажимаете на кнопку с плюсиком:
4. Копируете ссылку:
5. И добавляете ее в плагин "Свой код", в поле "Перед </head>".
Аналогично предыдущему коду, добавляете код из инструкции ниже в 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 .
Публикуете станицу или же выполняете предпросмотр. В результате у текста начинает отображаться выбранный вами шрифт.