Easy Google Fonts — Плагин для WordPress
Our new WordPress theme is almost ready! Want to know when we launch? Awesome! Visit our website and enter your details and we will e-mail you as soon as we are ready 🙂
View Plugin Demo Here
Follow us on twitter!
If you have found this plugin useful please donate here
A simple and easy way to add custom google fonts to any WordPress theme without coding. This plugin integrates with the WordPress Customizer so you can preview google fonts on your site in realtime. It’s compatible with any theme.
It also allows you to create custom theme specific font controls in the admin settings area to control particular css selectors. Once created, these custom font controls are instantly available in the customizer no coding required!
What does this plugin do?
- This plugin allows you to take full control of your theme’s typography in any WordPress theme (no coding required).
- It allows you to choose from over 600+ google fonts and font variants to insert into your website without coding.
- Allows you to preview font changes on your website in realtime using the WordPress Customizer.
- Create Unlimited Custom Font Controls: Create custom font controls in the admin area that are instantly available in the Customizer preview.
- Allows you to preview what your theme will look like with the new google fonts before you save any changes.
- Allows you to create your own font controls and rules in the admin area (no coding required).
- Allows you to easily change the look of your website with the click of a button.
- Automatically enqueues all stylesheets for your chosen google fonts.
- Allows you to add google fonts to your theme without editing the themes main stylesheet which allows you to update your theme without losing your custom google fonts.
Plugin Features
- Live Customizer Preview: Preview google fonts without refreshing the page in real time right in the WordPress Customizer.
- Over 600+ Google Fonts to choose from as well as a list of default system fonts.
- Works with any WordPress Theme. No coding required.
- Automatic Background Updates: Updates the google fonts list with the latest fonts automatically once.
- Translation Ready: MO and PO files are included.
- Seamless WordPress Integration: Uses the WordPress customizer for the live preview and has a white label admin area that looks like it is a part of WordPress.
- Custom WordPress Customizer Control: One of a kind control only available with this plugin.
Who is this Plugin ideal for?
- Anyone who is looking for an easy way to use google fonts in their theme without coding.
- Theme Authors: you can use this plugin to add custom google webfonts to your theme.
- Great for use on client projects or for use on existing websites.
- People that are happy with their theme but want an easy way to change the typography.
- Anyone with basic knowledge of CSS Selectors (in order to add custom font rules).
Developer Features
Please note: We are currently working on producing in-depth documentation for theme developers which will be available shortly.
- Cross Browser and Backwards Browser Compatible (Tested in all major browsers).
- Uses Action Hooks and Filters: For advanced integration.
- Seamless WordPress Integration: Live preview is integrated into the WordPress Customizer and the settings page follows core WordPress design guidelines.
- Uses the WordPress Options API to store and retrieve options.
- Highly Secure: Checks user permissions, uses nonces and the WordPress Security API.
- Uses the REST API for an enhanced admin experience.
- Strong Usability Testing.
- Enhanced Performance: Will only make a single request to google to fetch all fonts.
Credits and Donation
- WordPress Components. (Used in the admin settings page)
- Otherwise, this plugin has been entirely written from scratch by Titanium Themes.
If you have found this plugin useful please donate here
This section describes how to install the plugin and get it working.
e.g.
- From your WordPress Admin Dashboard go to: Plugins > Add New
- Search for «Easy Google Fonts»
- Locate the «Easy Google Fonts» plugin by Titanium Themes and click the Install Now button.
- Activate the plugin labeled «Easy Google Fonts».
- You’re done!
Totally new to wordpress and this plug in was super easy to use and allowed me to change fonts with no problem. The support also gave me CSS selector (I have NO knowledge of CSS…) to change the navigation font. Huge thank you!
Works well. Some issues with a recent upgrade, but support was excellent and problem is now resolved.
This plugin does one thing and it does that well: integrates Google Fonts into your WordPress site. A recent update did cause some issues on my site but the developer’s response to my query was super fast and after doing what he suggested my site is back to normal. Big fan of this plugin.
The latest updates caused issues with the plugin working properly on my site. The team very quickly responded and fixed the issue! This plugin is great for getting very specific with font styling, highly recommend.
Can’t recommend this plug-in enough. Great service as well!
This plugin is fantastic. The support for this plugin goes well above and beyond what I’ve ever had before. I highly suggest using this plugin!
Посмотреть все 214 отзывов«Easy Google Fonts» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники2.0.4 JS API
- Added fallback for sanitization functions when no font key is selected.
2.0.3 Bugfix and Backwards Compatibilty
- Bugfix: Tuples needed to be sorted in the google fonts url when the stylesheet url was being generated.
- Added complete support for the old tabs based api.
2.0.2
- Backwards Compatibilty: Added backwards compatibility for old theme integrations.
2.0.1
- Bugfix: Google stylesheet url requires font weights to be sorted in ascending order.
2.0.0
- Complete plugin codebase rewrite.
- Font controls/styles now support media queries.
- New Admin UI.
- New Customizer UI (now uses react js components).
- Live customizer preview has been rewritten to be more performant (by handling subsettings for each font control individually).
- Frontend query for font controls has been optimised for performance.
- Removed unnessary WordPress filters.
1.4.4 — WordPress 5.0 compatibility update
- Updated webfonts.json with the latest google fonts.
- Last minor update before major rewrite.
1.4.3 — WordPress 4.8 compatibility update
- Updated webfonts.json with the latest google fonts.
- Updated includes class-egf-frontend.php to only output styles if there is a selector.
1.4.2 — WordPress 4.7 compatibility update
- Fixed issue where the font controls weren’t saving in WordPress 4.7.
- Updated the font list.
1.4.1 — Urgent update
- Fixed issue where the plugin wasn’t taking effect for screen sizes under 700px
1.4.0 — Plugin update
- Now automatically removes white spaces added to the api key on the settings page.
- Started rewriting part of the code for eventual media query support.
1.3.9 — Stylesheet Update
- Updated the appearance in the customizer for the new changes in WordPress 3.4
1.3.7 — Important Update
- Addressed potential security issue on the plugin admin page — Hardened security and escaped any attributes passed via the URL throughout the plugin.
- Now added support for arabic and telegu and devangari subsets.
- Updated JSON decode when parsing fonts for servers running an older version of PHP.
1.3.6 — Updated Stylesheet Enqueue
- Addressed issue on certain servers where a 400 error was being returned when making a http request to google.
1.3.5 — Changed Stylesheet Enqueue
- Removed esc_url_raw() as it was causing a 404 error when fetching the stylesheet from google.
1.3.4 — Customizer js API Update
- Implemented font search to make it easier to browse google fonts (using the chosen js plugin).
- Implemented border controls.
- Implemented border radius controls.
- Completely rewritten the control javascript to utilise the new customizer js api (using backbone and underscore templates).
- Preview performance enhancement: Completely rewritten the preview javascript to utilise the new customizer js api.
- Performance update: Each font control now only registers one setting per control.
- Performance update: The functionality for each font control is lazy loaded to increase the customizer load speed.
- All settings for each font controls are handled by json objects (removed any hidden inputs and json2 library dependancy).
1.3.3 — WordPress 4.1+ Update
- Added patch for WordPress 4.1
- The code is going to be rewritten in Backbone for future releases.
1.3.2 — Big Update
- Now combining all of the font requests from google fonts in a single http request.
- Introducing Panels: A new customizer feature in WordPress 4.0 that makes it easier to manage alot of font controls. Our plugin creates a new panel called Typography.
- Google fonts are now separated into the following categories to make them easier to navigate: Serif, Sans Serif, Display, Handwriting, Monospace.
- Now the plugin keeps font state when user switches page in customizer.
- Now there is a separate section for default and custom font controls.
- Improved the help tab in the admin area to help people obtain a google api key.
- Synchronised Force Styles between the Manage Font Controls and the Edit Font Controls Screen
- Fixed issue with the font weights not showing up for the customizer control.
- The plugin now checks and handles occurances where theme developers have removed all default controls.
1.3.1
- Changed order of style outputs
- Futher UI Improvements
1.3
- Critical Update: Made the plugin WordPress 3.9 compatible
- Performance tuned the plugin
- Removed recursion during runtime.
- Updated local font list
1.2.5
- Performance enhancement for older browsers implemented. Safe to upgrade.
1.2
- Big Update: Complete Rewrite of Plugin
- New controls: Background Color, Margin, Padding and Display.
- Added Subset support.
- Introduced a large amount of actions and filters for theme developers.
- Big performance enhancement. The old version used to register 32 settings per control, this is now down to 3.
- Lightning fast customizer loading times, under 1 second.
- Rewrote the plugin into classes and views to make it more managable for future development.
- Rewrote the plugin into classes.
- MO/PO language files now included.
= 1.1.1=
* 3.8 Admin integration
1.1
- Full google fonts transient integration.
1.0
Стоит ли хостить у себя Google Fonts | by Liudmila Mzhachikh
Хостинг у себя vs сторонний хостингРаньше все внешние ресурсы хранили на CDN — когда загружаете ресурс с чужого домена.
➕ Такой подход позволял обойти ограничение браузера по подключениям к одному домену — Сейчас это уже не дает выигрыша по производительности (HTTPS, HTTP/2).
➕ Еще один предполагаемый профит от использования CDN — пользователь уже загрузил этот ресурс (jQuery, например), и он закеширован в браузере. Но 1) библиотек и версий очень много, а браузерный кеш ограничен по размерам 2) в браузерах появился уникальный кеш под каждый домен.
➖ Если используете CDN, то не знаете, какие данные ваших юзеров трекают.
➖ Проблемы безопасности при обращении к чужому домену.
➖Может стать единой точкой отказа, если не будет отвечать.
Поэтому советуют хранить шрифты локально. Но у локального хранения шрифтов есть свои нюансы. О них далее.
Google Fonts и как они работают+ бесплатные
+ предоставляют свой CDN
+ добавляются в проект одной строчкой кода
— перформанс
Сначала запрашивается CSS с одного домена. Он, в свою очередь, дергает шрифт с другого домена (почему они на разных доменах — не понятно). На установку соединения — доп. время. Шрифт подгрузится гораздо позже, чем HTML.
Немного улучшить ситуацию поможет preconnect для домена шрифта (CSS подгрузится достаточно быстро, а шрифт нет).
rel="preconnect"
Так мы говорим браузеру заранее установить соединение. Сделать это можно только для домена, а не вашего шрифта — Google Fonts каждый раз генерит уникальный хэш.
Font Display SwapСвойство позволяет отображать шрифт-фоллбэк, пока кастомный шрифт не загрузился (некоторые браузеры по дефолту вообще ничего не показыают, пока шрифт не загрузился). Для этого надо добавить параметр в урл. Но свойство сработает только когда CSS-файл будет загружен.
Self-hosting Google FontsЕсть тулзы, позволяющие сразу выгрузить все начертания шрифта. Но при выгрузке размер оказался больше, чем при загрузке с GF.
2 отличия:
1) font-display: swap отсутствовал
2) unicode-range отсутствовал
Font SubsettingSubsettling — это удаление из шрифта символов, которые не будут использоваться ради уменьшения размера шрифтового файла. Google Fonts автоматически устанавливает font-face с subset для латиницы.
У Google Font есть свои мех-мы для улучшения производительностиGF отдает не один и тот же CSS. Он смотрит на user-agent. Сами шрифтовые файлы также зависят от того, с какой платформы вы его загружаете.
Хинтинг — изменение контура шрифта при его растеризации при помощи специальных программных инструкций, заложенных в шрифтовой файл. Зависит от платформы. Если загружать с CDN — подгрузится только нужный. Если решили хранить шрифт локально, то нужно загрузить все — это сильно увеличивает размер, надо определиться, нужен ли он.
Будущие улучшенияБудущие крутые штуки, которые сейчас внедряются в ГФ и которые вы получите, если останетесь с ними:
1) Variable Fonts — Все начертания хранятся в одном шрифтовом файле. У шрифта есть настраиваемые (через CSS) параметры.
2) Progressive Font Enrichment — Следующий уровень развития subsetting-а — позволяет подгружать символы по мере необходимости в уже загруженный шрифт, вместо того, чтобы загружать новый.
Гугл обновляет шрифты. Поэтому хранить локально надежнее — какой-нибудь апдейт может поломать вам дизйн.
Преимущества от локального размещенияЭксперимент автора: время загрузки страницы с локальными шрифтами увеличилась 2 раза. Шрифт при этом еще не загрузился ни для одного случая, но дело не в шрифте. Блокирует CSS: браузер видит, что ему надо загрузить какой-то CSS, и пока он его не загрузит и не распарсит, но вообще ничего дальше показывать не будет. Почему не грузить CSS асинхронно — чтобы избежать лишних перерисовок.
ПредзагрузкаРазмещая шрифты локально, вы все еще можете их прелоадить. Но у этого есть потенциальные недостатки:
➖ повышая приоритет шрифта, вы понижаете в приоритете другие важные ресурсы
➖ шрифт не используется или не поддерживается этим браузером — лишняя загрузка ресурсов
➖ если показывается фолбэк, пока не подгрузится шрифт, то не так важно его предзагружать
Выводы1️⃣ Хранить лучше локально, это дает прирост к производительности
2️⃣ У GF много умных механизмов для улучшение производительности. Если переходите на локальное хранение, вам надо либо реализовать все эти мех-мы самостоятельно, либо вы можете сильно ухудшить производительность для некоторых браузеров
Красивые шрифты Google Fonts для сайта
Добрый день, уважаемые читатели!
Каждый из нас старается сделать свой сайт как можно привлекательнее и оригинальнее. Одним из важнейших элементов его оформления являются шрифты, и сегодня я предлагаю вам познакомится с возможность улучшить читаемость текста и улучшить внешний вид сайта используя шрифты гугл фонтс.
Навигация по статье:
Что такое Google Fonts
Google Fonts (гугл фонтс) – специализированный онлайн сервис, который предоставляет универсальный набор шрифтов в свободном доступе, то есть бесплатно, которые можно использовать для форматирования теста на сайте. Гугл фонтс очень удобен в применении и это очень полезная находка для каждого веб-разработчика. В библиотеке можно найти абсолютно любой шрифт, который наилучшим образом будет соответствовать оформлению вашего сайта.
Как выбрать и настроить шрифты Google Fonts
Что бы подключить гугл шрифты к своему сайту, для начала нужно выбрать и настроить их. Для этого делаем следующее:
- 1.Зайти на страницу сервиса по адресу: //fonts.google.com
- 2.Выбираем подходящий шрифт и нажимаем на красный плюсик, который находится в правом верх нем углу, напротив названия. После того как вы нажмете на красный плюсик, он изменится на минус — это означает что данный шрифт гугл фонтс добавлен в ваш набор шрифтов.
- 3.В низу окна появится темно-серая полоса с надписью «Family Selected», нажав на которую мы получаем доступ к настройкам и коду для вставки шрифта гугл фонтс на страницу сайта.
- 4.На вкладке «CUSTOMIZE» можно настроить шрифт гугл фонтс, а точнее, выбрать поддерживаемые степени жирности, и поддерживаемые языки.
- 5.5. На вкладке «EMBED» находится HTML-код и CSS-стили, которые нам необходимо скопировать для последующей вставки код HTML-код нашей страницы.
Обратите внимание! Не стоит включать все настройки жирности, т.к. это на прямую повлияет на скорость загрузки страниц.
Перейдя по ссылке «Getting started guide» вы можете перейти на страницу с подробными примерами, где показано, как можно использовать шрифты гугл фонтс и какие эффекты к ним можно применить.
Как вставить шрифты гугл фонтс на сайт
Для того чтобы подключить выбранный гугл шрифт к вашему сайту нужно:
- 1.Открыть HTML-страницу при помощи текстового редактора, например Notepad++ вставить, полученный в сервисе Google Fonts , код между тегами <HEAD> …</HEAD> .
<html> <head> <link href=»//fonts.googleapis.com/css?family=Assistant:600″ rel=»stylesheet»> </head> <body> <div>Пример текста</div> </body> </html>
<html>
<head>
<link href=»//fonts.googleapis.com/css?family=Assistant:600″ rel=»stylesheet»>
</head>
<body>
<div>Пример текста</div>
</body>
</html>
Если ваш сайт работает на CMS то данный код нужно будет вставлять в шаблон оформления между тегами <HEAD> …</HEAD>
Файл шаблона с данным фрагментом кода может называться header.php, header.tpl, top.php или как то в таком духе. Здесь всё зависит от того на какой CMS работает ваш сайт. - 2.2. Для того, чтобы данный шрифт гугл фонтс применился на странице к нужному блоку с текстом, вам нужно открыть, при помощи текстового редактора, файл стилей вашего сайта и приписать классу нужного элемента следующий стиль: font-family: ‘Assistant’, sans-serif;
В зависимости от CMS на которой работает сайт файл стилей может называться по разному: style.css, stylesheet.css, main.css и т.д.
В css файле это будет выглядеть так:.css-selector { font-family: ‘Assistant’, sans-serif; }
.css-selector {
font-family: ‘Assistant’, sans-serif;
}
Вместо .css-selector вы пишете название класса или идентификатора элемента, для которого хотите применить гугл шрифт.
Вместо ‘Assistant’ – будет идти название выбранного вами шрифта гугл фонтс
Надеюсь, данная статья поможет вам создать уникальный и неповторимый стиль оформления для вашего сайта. Если у вас возникнут вопросы по подключению гугл фонтс – вы всегда их можете задать через форму комментариев.
На этом у меня все. Пишите комментарии, подписывайтесь на мой канал YouTube и на мою рассылку. До встречи в следующих статьях!
С уважением Юлия Гусарь
Руководство по Google Font API
Несмотря на зарождающиеся технологии и веб-стартапы в Интернете, в недавнем прошлом нам не хватало богатой и красивой веб-типографики.
Хотя у нас есть так много шрифтов на выбор, мы могли использовать только определенный набор обычных шрифтов, установленных и поддерживаемых большинством компьютеров — эти шрифты в совокупности были известны как веб-безопасные шрифты .
Введите API шрифтов Google
Компания Google представила каталог шрифтов Google и API шрифтов Google, бесплатную веб-службу, которая позволяет владельцам веб-сайтов легко, удобно и эффективно использовать другие шрифты, помимо веб-безопасных шрифтов.Таким образом, веб-разработчики и авторы теперь могут использовать кодирование CSS @ font-face, чтобы использовать каталог шрифтов и API Google для доступа к высококачественным шрифтам.
Google Font API — это новый элемент в нише Font-as-Service, в которую входят TypeKit, Typotheque и другие.
Итак, давайте немного углубимся и обсудим Google Font API.
Что такое Google Font API?
Хорошо, вы много путешествуете по Интернету, но видели ли вы много нестандартных шрифтов, используемых на веб-сайтах или в блогах?
Давайте определим нестандартные шрифты как означающие что угодно, кроме веб-безопасных шрифтов, таких как Arial, Helvetica, Verdana, Georgia и Times New Roman.
Вне сайтов и блогов, ориентированных на дизайн (например, в основной сети), вероятно, немного.
Google Font API — это веб-сервис, который поддерживает высококачественные файлы шрифтов с открытым исходным кодом, которые можно легко использовать в ваших веб-дизайнах.
Мы надеемся, что коллекция шрифтов будет продолжать расти, чтобы дать вам возможность выбирать гораздо больше типов шрифтов.
Преимущества использования Google Font API
Если вы решите использовать Google Font API, вот некоторые из преимуществ, которыми вы сможете воспользоваться:
Продолжайте использовать текст HTML
В отличие от использования изображений или замены CSS-background-image, использование @ font-face в качестве решения для улучшения веб-типографики более благоприятно для SEO.
Кроме того, это ненавязчивое решение, означающее, что вам не нужно изменять какой-либо существующий контент — вы просто обновляете свои таблицы стилей CSS.
Доступен в Интернете
Поскольку вы используете текст HTML, а не изображение или фон CSS, это не влияет на людей, использующих программы чтения с экрана.
Инфраструктура с высоким временем безотказной работы и сокращение обязанностей вашего веб-сервера
Offloahttps: //www.webfx.com/blog/web-design/website-features-that-you-can-easily-offload/ Если ваш @ font-face нуждается в надежной инфраструктуре Google, вы можете быть уверены о том, что обслуживание файлов шрифтов будет быстрым, и что вы снимаете нагрузку с вашего собственного сервера.
Как использовать Google Font API
Вам не нужно быть заядлым веб-разработчиком, чтобы использовать Google Font API. Чтобы использовать Google Font API, все, что вам нужно сделать, это добавить один элемент link таблицы стилей на свои веб-страницы, а затем вы можете начать использовать этот шрифт в своем CSS.
Вот обобщенный процесс использования Google Font API:
Шаг 1. Добавьте ссылку на таблицу стилей с предпочитаемым шрифтом
Найдите в коллекции шрифтов Google, какие шрифты можно использовать.Основной формат для включения определенного шрифта на ваш собственный веб-сайт:
">
Шаг 2. Используйте шрифт для стилизации HTML-элементов
В приведенном ниже примере вы назначаете элементам шрифт Font Name с помощью атрибута CSS font-family .
h2 {
семейство шрифтов: «Название шрифта», с засечками;
} Если вам нужен шрифт только для одноразового использования, вы можете объявить свой стиль встроенным.
Шесть редакций прекрасны
Шаг 3. Всегда имейте резервный план
Вы могли заметить в приведенных выше примерах кода, что я использовал serif в качестве резервного шрифта. Это сделано, чтобы избежать неожиданного поведения. Это означает, что если что-то пойдет не так с серверами Google, браузер может использовать шрифт Serif по умолчанию. Сделайте это практикой при использовании атрибута font-family , независимо от того, используете ли вы @ font-face или нет — такая практика называется стеком шрифтов.
Пример использования Google Font API
Вот пример. Скопируйте и вставьте следующий блок кода в документ HTML, сохраните его, а затем откройте в своем веб-браузере.
Я предлагаю протестировать ваш HTML-документ в различных браузерах, чтобы вы могли увидеть различия между браузерами (или их отсутствие).
Вы можете поэкспериментировать с другим типом шрифта, но в этом примере я использовал шрифт Lobster.
href = "http: // fonts.googleapis.com/css?family=Lobster ">
<стиль>
h2 {
семейство шрифтов: «Лобстер», с засечками;
размер шрифта: 48 пикселей;
}
Шесть редакций - это прекрасно!
Результат:
Скриншот вышеуказанного блока кода через Google Chrome 4.1
Сгенерированный текст («Шесть редакций прекрасны!») Представляет собой обычный текст HTML, поэтому вы можете добавить больше стилей в свой элемент стиля, если хотите (в нашем примере мы используем только один элемент: h2 ).
Запрос нескольких шрифтов с помощью Google Font API
Допустим, вам нужно три шрифта из каталога шрифтов Google. Не создавайте несколько запросов . Множественные запросы увеличивают количество HTTP-запросов, которые делает веб-страница. Чем меньше HTTP-запросов вы сделаете, тем лучше будет время отклика веб-страницы.
Вместо нескольких тегов link таблицы стилей используйте следующий формат для свойства href тега link таблицы стилей.
В следующем примере URL-запроса загружаются все три шрифта (Vollkorn, Yanone и Droid Sans) за один запрос.
Vollkorn | Yanone | Дроид + Санс
Теперь вы можете использовать любой из этих трех шрифтов в своих элементах стиля.
Интересные факты
Названия шрифтов разделяются символом | без пробелов между ними. Обратите внимание на использование + в шрифте Droid Sans. Используйте знаки + в именах шрифтов, в которых есть пробелы.В нашем случае название шрифта — Droid Sans, поэтому в ссылке запроса мы использовали Droid + Sans .
Совет: Использование слишком большого количества шрифтов в одном запросе может замедлить время отклика страницы. Так что загружайте только нужные шрифты. Будьте консервативны: просто потому, что это бесплатно, не означает, что вы должны сходить с ума от @ font-face .
Вес и стиль шрифта для шрифтов Google Font API
У веб-шрифтов также есть вариации веса / стиля шрифта. Чтобы использовать эти варианты, добавьте двоеточие (: ) к имени шрифта, а затем стили и веса.
В приведенном ниже примере мы запрашиваем вариант Vollkorn жирным шрифтом и курсивом, а Inconsolata — вариант курсивом.
http://fonts.googleapis.com/css?family=Vollkorn: полужирный , полужирный | Inconsolata: курсив | Droid + Sans
Есть также шорткоды для вариаций каждого шрифта. Их:
- Полужирный: b
- Курсив: i
- Полужирный курсив: bi
Вот пример использования коротких кодов:
http: // шрифты.googleapis.com/css?family=Vollkorn: b , bi | Inconsolata: i | Droid + Sans
Интересные факты
Используйте двоеточие (: ) после названия шрифта без пробелов между ними, за которым следует название варианта (например, полужирным шрифтом ) или короткий код названия варианта (например, bi ). Если вам нужно несколько вариантов шрифта для одного шрифта, разделите их запятой (, ) без пробелов между ними.
Google Font API обеспечивает более красивую веб-типографику
Индустрия веб-дизайна гудит в поисках решения давней проблемы ограничений шрифтов в Интернете. Вы уже используете @ font-face ? Если вы еще не используете его, почему бы и нет? Делитесь своими мыслями и мнениями в комментариях.
Связанное содержимое
Добавить шрифты Google | Webflow University
В этом видео используется старый интерфейс. Скоро появится обновленная версия!
Вы можете добавить дополнительные шрифты в свой проект прямо из раскрывающегося списка font на панели «Стиль». Просто выберите добавить шрифты , и мы перенесем вас в настройки проекта → Настройки шрифтов .Здесь вы можете выбрать и добавить шрифтов Google в свои проекты.
Использование шрифтов Google — это лишь один из трех способов импорта дополнительных шрифтов в свои проекты Webflow. Два других — шрифты Adobe (Typekit) и пользовательские шрифты, доступные на всех планах.
В этом уроке
Просмотр шрифтов Google
Если вы хотите просмотреть все варианты шрифтов Google перед тем, как сделать свой выбор, посетите Google fonts [↗] для предварительного просмотра коллекции бесплатных веб-шрифтов Google в реальном времени.Оказавшись на странице Google Fonts, вы можете просматривать и сортировать по различным категориям и тестировать, как шрифты будут отображаться. Это дает вам лучшее представление о том, как будет выглядеть шрифт определенного размера и веса, прежде чем вы добавите его в свой проект Webflow.
Добавление шрифта Google в свой проект
После того, как вы выбрали свой выбор, перейдите в свой проект Webflow:
- Выберите шрифт из раскрывающегося списка в разделе Настройки проекта → Шрифты → Шрифты Google
- Выберите варианты веса, языки и сценарии, которые вы хотите для своего проекта.Вы всегда можете вернуться к этому позже, чтобы добавить или удалить выбор.
- Добавьте шрифт
Выбранные шрифты будут доступны в дизайнере Webflow при следующей загрузке. Обновите конструктор, если он у вас уже открыт.
Необходимо знатьШрифты Google, которые уже доступны в конструкторе, например Lato, не будут отображаться в списке шрифтов Google в разделе Настройки проекта → шрифты .
Удаление шрифта Google
Чтобы удалить шрифт Google из проекта, просто удалите его в Project settings → fonts → Google fonts.
Необходимо знатьЭлементы в проекте, к которым при удалении все еще прикреплен шрифт, по-прежнему будут отображаться как выбранные, но будут отображаться как Times New Romans.
Попробуйте Webflow — это бесплатно
В этом видео используется старый интерфейс. Скоро появится обновленная версия!
Easy Google Fonts — плагин для WordPress
Наша новая тема WordPress почти готова! Хотите знать, когда мы запустим? Потрясающие! Посетите наш веб-сайт и введите свои данные, и мы отправим вам электронное письмо, как только будем готовы 🙂
Посмотреть демонстрацию плагина можно здесь
Следите за нами в твиттере!
Если вы нашли этот плагин полезным, пожертвуйте сюда
Простой и легкий способ добавить пользовательские шрифты Google в любую тему WordPress без программирования.Этот плагин интегрируется с настройщиком WordPress, поэтому вы можете просматривать шрифты Google на своем сайте в режиме реального времени. Он совместим с любой темой.
Он также позволяет создавать пользовательские элементы управления шрифтом для конкретной темы в области настроек администратора для управления определенными селекторами CSS. После создания эти настраиваемые элементы управления шрифтами мгновенно становятся доступными в настройщике без необходимости кодирования!
Что делает этот плагин?
- Этот плагин позволяет вам полностью контролировать типографику вашей темы в любой теме WordPress (кодирование не требуется).
- Это позволяет вам выбирать из более чем 600+ шрифтов Google и вариантов шрифтов для вставки на ваш сайт без кодирования.
- Позволяет просматривать изменения шрифтов на вашем веб-сайте в реальном времени. с помощью настройщика WordPress.
- Создание неограниченного количества пользовательских элементов управления шрифтами: Создание пользовательских элементов управления шрифтами в области администрирования, которые мгновенно становятся доступными в предварительном просмотре настройщика.
- Позволяет предварительно просмотреть, как будет выглядеть ваша тема с новыми шрифтами Google, прежде чем сохранять какие-либо изменения.
- Позволяет создавать собственные элементы управления шрифтами и правила в области администрирования (кодирование не требуется).
- Позволяет легко изменить внешний вид вашего веб-сайта одним нажатием кнопки.
- Автоматически ставит в очередь все таблицы стилей для выбранных вами шрифтов Google .
- Позволяет добавлять шрифты Google в вашу тему без редактирования основной таблицы стилей темы, что позволяет обновлять тему без потери пользовательских шрифтов Google.
Возможности плагина
- Предварительный просмотр Live Customizer: Предварительный просмотр шрифтов Google без обновления страницы в реальном времени прямо в настройщике WordPress.
- Более 600+ Google Fonts на выбор, а также список системных шрифтов по умолчанию.
- Работает с любой темой WordPress. Кодирования не требуется.
- Автоматические фоновые обновления: автоматически обновляет список шрифтов Google новейшими шрифтами один раз.
- Готовность к переводу: включены файлы MO и PO.
- Бесшовная интеграция с WordPress: использует настройщик WordPress для предварительного просмотра в реальном времени и имеет область администрирования с белой этикеткой, которая выглядит так, как будто она является частью WordPress.
- Custom WordPress Customizer Control: единственный в своем роде элемент управления, доступный только с этим плагином.
Для кого этот плагин идеален?
- Всем, кто ищет простой способ использовать шрифты Google в своей теме без программирования.
- Авторы темы: вы можете использовать этот плагин для добавления пользовательских веб-шрифтов Google в вашу тему.
- Отлично подходит для использования в клиентских проектах или для использования на существующих веб-сайтах.
- Люди, которые довольны своей темой, но хотят иметь простой способ изменить типографику.
- Любой, у кого есть базовые знания о селекторах CSS (для добавления собственных правил шрифтов).
Функции разработчика
Обратите внимание: В настоящее время мы работаем над созданием подробной документации для разработчиков тем, которая будет доступна в ближайшее время.
- Кросс-браузерная и обратная браузерная совместимость (протестировано во всех основных браузерах).
- Использует обработчики действий и фильтры: Для расширенной интеграции.
- Бесшовная интеграция с WordPress: Предварительный просмотр в реальном времени интегрирован в настройщик WordPress, а страница настроек соответствует основным рекомендациям по дизайну WordPress.
- Использует WordPress Options API для хранения и извлечения параметров.
- Highly Secure: Проверяет права пользователей, использует одноразовые номера и API безопасности WordPress.
- Использует REST API для расширенных возможностей администратора.
- Сильное тестирование юзабилити.
- Повышенная производительность: Будет делать только один запрос к Google для получения всех шрифтов.
Кредиты и пожертвования
- Компоненты WordPress.(Используется на странице настроек администратора)
- В остальном этот плагин был полностью написан Titanium Themes с нуля.
Если вы нашли этот плагин полезным, пожертвуйте сюда
В этом разделе описывается, как установить плагин и заставить его работать.
например
- На панели администратора WordPress перейдите в: Плагины> Добавить новый
- Найдите «Easy Google Fonts»
- Найдите плагин «Easy Google Fonts» от Titanium Themes и нажмите кнопку «Установить сейчас».
- Активируйте плагин с надписью «Easy Google Fonts».
- Готово!
Совершенно новый для wordpress, этот плагин был очень простым в использовании и позволил мне без проблем менять шрифты. Поддержка также дала мне селектор CSS (у меня НЕТ знаний о CSS …) для изменения шрифта навигации. Огромное спасибо!
Работает хорошо. Некоторые проблемы с недавним обновлением, но поддержка была отличной, и проблема теперь решена.
Этот плагин делает одно, и делает это хорошо: интегрирует шрифты Google на ваш сайт WordPress. Недавнее обновление вызвало некоторые проблемы на моем сайте, но разработчик ответил на мой запрос очень быстро, и после того, как он сделал то, что он предложил, мой сайт вернулся в нормальное состояние. Большой поклонник этого плагина.
Последние обновления вызвали проблемы с правильной работой плагина на моем сайте. Команда очень быстро отреагировала и исправила проблему! Этот плагин отлично подходит для уточнения стиля шрифтов, настоятельно рекомендую.
Не могу порекомендовать этот плагин в достаточной степени. Отличный сервис!
Это фантастический плагин. Поддержка этого плагина выходит далеко за рамки того, что у меня было раньше. Я настоятельно рекомендую использовать этот плагин!
Прочитать 214 отзывов«Easy Google Fonts» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов2.0,4 JS API
- Добавлен резервный вариант для функций очистки, когда не выбрана клавиша шрифта.
2.0.3 Исправление ошибок и обратная совместимость
- Исправление: кортежи необходимо было отсортировать в URL-адресе шрифтов Google при создании URL-адреса таблицы стилей.
- Добавлена полная поддержка старого API на основе вкладок.
2.0.2
- Обратная совместимость: Добавлена обратная совместимость для интеграции старых тем.
2.0,1
- Исправление: URL-адрес таблицы стилей Google требует сортировки веса шрифта в порядке возрастания.
2.0.0
- Полное переписывание кодовой базы плагина.
- Элементы управления шрифтом / стили теперь поддерживают медиа-запросы.
- Новый пользовательский интерфейс администратора.
- Новый пользовательский интерфейс Customizer (теперь использует компоненты react js).
- Предварительный просмотр настройщика в реальном времени был переписан, чтобы обеспечить более высокую производительность (за счет обработки поднастроек для каждого элемента управления шрифтом индивидуально).
- Запрос внешнего интерфейса для элементов управления шрифтами оптимизирован для повышения производительности.
- Удалены ненужные фильтры WordPress.
1.4.4 — обновление совместимости WordPress 5.0
- Обновлен webfonts.json с использованием новейших шрифтов Google.
- Последнее незначительное обновление перед серьезным изменением.
1.4.3 — обновление совместимости WordPress 4.8
- Обновлен webfonts.json с использованием новейших шрифтов Google.
- Обновлено включает class-egf-frontend.php для вывода стилей только при наличии селектора.
1.4.2 — обновление совместимости WordPress 4.7
- Исправлена ошибка, из-за которой элементы управления шрифтами не сохранялись в WordPress 4.7.
- Обновлен список шрифтов.
1.4.1 — Срочное обновление
- Исправлена ошибка, из-за которой плагин не работал на экранах размером менее 700 пикселей
1.4.0 — Обновление плагина
- Теперь автоматически удаляет пробелы, добавленные к ключу api на странице настроек.
- Начато переписывание части кода для возможной поддержки медиа-запросов.
1.3.9 — Обновление таблицы стилей
- Обновлен внешний вид в настройщике с учетом новых изменений в WordPress 3.4
1.3.7 — Важное обновление
- Устранена потенциальная проблема безопасности на странице администрирования подключаемого модуля — усилена безопасность и исключены любые атрибуты, передаваемые через URL-адрес во всем подключаемом модуле.
- Теперь добавлена поддержка арабского языка и подмножеств телугу и девангари.
- Обновлено декодирование JSON при разборе шрифтов для серверов, на которых установлена более старая версия PHP.
1.3.6 — Обновленная очередь таблицы стилей
- Устранена проблема на некоторых серверах, из-за которой при HTTP-запросе в Google возвращалась ошибка 400.
1.3.5 — Измененная очередь таблицы стилей
- Удален esc_url_raw (), поскольку он вызывал ошибку 404 при получении таблицы стилей из Google.
1.3.4 — Обновление API js для настройки
- Реализован поиск шрифтов, чтобы упростить поиск шрифтов Google (с использованием выбранного плагина js).
- Осуществлен пограничный контроль.
- Реализованы элементы управления радиусом границы.
- Полностью переписан управляющий javascript, чтобы использовать новый API-интерфейс настройки js (с использованием шаблонов магистрали и подчеркивания).
- Повышение производительности предварительного просмотра: полностью переписан предварительный просмотр javascript, чтобы использовать новый API-интерфейс настройки js.
- Обновление производительности: каждый элемент управления шрифтом теперь регистрирует только одну настройку для каждого элемента управления.
- Обновление производительности: функция для каждого элемента управления шрифтом загружается лениво, чтобы увеличить скорость загрузки настройщика.
- Все настройки для каждого элемента управления шрифтом обрабатываются объектами json (удалены все скрытые входы и зависимость библиотеки json2).
1.3.3 — WordPress 4.1+ обновление
- Добавлен патч для WordPress 4.1
- Код будет переписан в Backbone для будущих выпусков.
1.3.2 — Большое обновление
- Теперь все запросы шрифтов из шрифтов Google объединяются в один HTTP-запрос.
- Представляем панели: новая функция настройки в WordPress 4.0, что упрощает управление множеством элементов управления шрифтами. Наш плагин создает новую панель под названием Typography.
- Шрифты Google теперь разделены на следующие категории, чтобы упростить навигацию: Serif, Sans Serif, Display, Handwriting, Monospace.
- Теперь плагин сохраняет состояние шрифта, когда пользователь переключает страницу в настройщике.
- Теперь есть отдельный раздел для управления шрифтами по умолчанию и для настраиваемых шрифтов.
- Улучшена вкладка справки в области администрирования, чтобы помочь людям получить ключ API Google.
- Синхронизированные стили силы между элементами управления шрифтом и экраном редактирования элементов управления шрифтом
- Исправлена проблема, из-за которой вес шрифта не отображался для элемента управления настройщика.
- Плагин теперь проверяет и обрабатывает случаи, когда разработчики темы удалили все элементы управления по умолчанию.
1.3.1
- Изменен порядок вывода стилей
- Дальнейшие улучшения пользовательского интерфейса
1,3
- Критическое обновление: Создан плагин WordPress 3.9 совместимый
- Производительность настроил плагин
- Удалена рекурсия во время выполнения.
- Обновлен список локальных шрифтов
1,2,5
- Улучшена производительность для старых браузеров. Безопасно для обновления.
1,2
- Большое обновление: полная переработка подключаемого модуля
- Новые элементы управления: цвет фона, поля, отступы и отображение.
- Добавлена поддержка подмножества.
- Введено большое количество действий и фильтров для разработчиков тем.
- Большое повышение производительности. В старой версии регистрировалось 32 параметра для каждого элемента управления, теперь их количество сократилось до 3.
- Молниеносно быстрое время загрузки настройщика, менее 1 секунды.
- Переписал плагин в классы и представления, чтобы сделать его более управляемым для будущего развития.
- Переписал плагин на классы.
- Языковые файлы MO / PO теперь включены.
= 1.1.1 =
* 3.8 Интеграция администратора
1,1
- Полная переходная интеграция шрифтов Google.
1,0
CSS шрифтов Google
Google Шрифты
Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать Google Fonts.
шрифтов Google можно использовать бесплатно, и у них есть более 1000 шрифтов на выбор.
Как использовать Google Fonts
Просто добавьте ссылку на специальную таблицу стилей в разделе
, а затем обратитесь к шрифту в CSS.Пример
Здесь мы хотим использовать шрифт «Sofia» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Пример
Здесь мы хотим использовать шрифт «Trirong» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Пример
Здесь мы хотим использовать шрифт «Audiowide» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Примечание: При указании шрифта в CSS всегда указывайте в минимум один запасной шрифт (чтобы избежать неожиданного поведения).Итак, здесь вы также должны добавить общее семейство шрифтов (например, с засечками или без засечек) в конец списка.
Чтобы просмотреть список всех доступных шрифтов Google, посетите наш How To — Google Fonts Tutorial.
Использовать несколько шрифтов Google
Чтобы использовать несколько шрифтов Google, просто разделите имена шрифтов вертикальной чертой.
символ ( | ), например:
Пример
Запросить несколько шрифтов:
Результат:
Попробуй сам »Примечание: Запрос нескольких шрифтов может замедлить работу ваших веб-страниц! Так что будьте осторожны с этим.
Стилизация шрифтов Google
Конечно, вы можете стилизовать шрифты Google по своему усмотрению с помощью CSS!
Пример
Стиль шрифта «Sofia»:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Включение эффектов шрифта
Google также включил различные эффекты шрифтов, которые вы можете использовать.
Сначала добавьте эффект = имя эффекта в Google API,
затем добавьте имя специального класса к элементу, который будет использовать специальный
эффект.Имя класса всегда начинается с font-effect- и заканчивается именем эффекта .
Пример
Добавить эффект огня к шрифту «София»:
body {
семейство шрифтов: «София», без засечек;
размер шрифта: 30 пикселей;
}
София, ул. Пожар
Результат:
Попробуй сам » Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой.
( | ), вот так:
Пример
Добавьте несколько эффектов к шрифту «Sofia»:
body {
семейство шрифтов: «София», без засечек;
размер шрифта: 30 пикселей;
}