Спонсор материала.
Кондиционеры в интернет-магазине http://www.technodom.kz/catalog/konditsionery . Кондиционеры — лучшие товары, кредитование, огромный выбор, безупречный сервис.

Добрый день дорогие читатели. Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.

Одними из главных факторов, который отвечает за восприятие информации на сайте, являются шрифты и то, как мы их используем вместе. Так как на одном сайте, чаще всего употребляется двое и более разновидностей шрифтов, например для заголовков и просто основного текста.

Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая «бедная» стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.

Стандартные шрифты:

Cufon и @font-face

Ранее я уже писал про , с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.

Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.

В любом случае Cufon и @font-face уменьшают скорость загрузки сайта, хоть и не значительно.

Использование Google Fonts на сайте

Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.

Как видите, заголовки статей и подзаголовки у меня выполнены в не стандартном шрифте, вот сейчас на практике я покажу как такое сделать, а вы уже по аналогии будете пробовать на своих сайтах.

Выбор шрифта в репозитории

Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски:). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:

Не много по меню:
Слева, как видите, находиться блок с всевозможными фильтрами поиска шрифтов, в котором вы можете выбрать, к примеру, только латинские шрифты или кириллические. А сверху, настройки по отображению примеров, которые разделены на 4 вкладки:

• Word — отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
• Sentence — отображение в виде одного предложения;
• Paragraph — выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
• Poster — отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.

Подключение шрифта к сайту

После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:

Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:

После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в и @import в css файле. Я использую последний способ.

Открываем свой файл css и прописываем строчку, которую нам предоставил google:

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

Всё достаточно просто, после того, как мы подключили шрифт через @import , нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:

h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}

После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.

На этом всё, спасибо за внимание и до скорых встреч.

Отличный источник шрифтов для веб-дизайнеров. В WPBv4 начали использовать популярное сочетание шрифтов Google Font : гарнитуры Oswald и Lora . Некоторые пользователи задавали вопросы относительно того, можно ли использовать шрифты от Google в темах для WordPress и о том, как это сделать. В этой статье речь пойдет о том, как добавлять шрифты Google Web Fonts в темы WordPress правильно и при этом не повлиять на быстродействие вашего сайта.

Ищем шрифты Google Web Fonts, которые вам нравятся

Сначала надо найти те шрифты от Google, которые вам нравятся. Поищите варианты среди предложенных в библиотеке шрифтов под названием Google fonts library . Как только найдете подходящий вариант, кликните на кнопку Quick-use :

После клика на данной кнопке вы окажетесь на новой странице. Прокрутите до тех пор, пока не увидите форму с названием "Add this code to your website ":

Скопируйте код и вставьте его в блокнот, мы будем использовать его позже. Обычно используется как минимум 2 разных шрифта. К примеру, в нашей практике использовались шрифты Oswald + Lora . Так что описанную выше процедуру надо повторить и для второго шрифта.

Добавляем шрифты Google Web Fonts в тему WordPress

Есть три основных способа добавления шрифтов от Google в ваш веб-сайт. К примеру, есть стандартный путь, способ импорта @import и добавление при помощи Javascript . Обычно используют один из двух первых методов.

Самый простой способ - это открыть файл вашей темы style.css и вставить в него следующий код, имеющий отношение к добавляемому шрифту (помните, мы скопировали его в блокнот на первом шаге):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Так делают многие (StudioPress , Genesis ). Но, тем не менее, это не совсем корректный метод добавления открытых шрифтов. Использование метода @import блокирует параллельное скачивание, в результате чего веб-браузер будет сначала до конца скачивать файл со шрифтами и только потом продолжит загружать остальной контент вашего веб-сайта. Поэтому, хотя такой способ кажется удобным, это не лучший способ для работы со шрифтом, если вам небезразлична скорость и производительность вашего сайта. Подробности о данных нюансах вы можете прочесть здесь .

Самым лучшим будет объединение запросов к разным шрифтам Google Fonts в один запрос , чтобы избежать избыточного числа HTTP-запросов. Вот как это сделать. Добавляем код:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Если даже вы вынуждены использовать @import , по крайней мере объедините множественные запросы в один.

Как добавить шрифты Google Web Fonts без ущерба для производительности сайта

Самым лучшим будет использование стандартного метода , с помощью которого используются ссылки, а не импорт файла. Просто возьмите два адреса URL из первого шага данной инструкции. Объедините 2 разных шрифта, добавив между ними символ | . Затем поместите полученный код в блок head вашей темы. Для этого вам придется отредактировать файл header.php и добавить в него код из таблицы стилей. Должно получиться что-то вроде следующего:

Основная цель - это добавить запрос к шрифту на ранней стадии. Согласно блогу проекта Google Web Fonts , если есть тег скрипта перед объявлением шрифта @font-face , тогда Internet Explorer ничего не будет рендерить на странице, пока не загрузится файл самого шрифта.

После выполнения данного шага можете просто использовать полученный фрагмент кода и шрифт в файле CSS вашей темы. Выглядеть это будет примерно так:

H1 { font-family: "Oswald", Helvetica, Arial, serif; }

Есть немало дочерних тем и фреймворков. Не рекомендуется изменять файлы родительской темы, особенно, если вы используете фреймворк; потому что изменения в теме будут стерты каждый раз, как вы обновляете версию фреймворка. Вам придется поработать над надстройками и фильтрами в родительской теме или ее фреймворке, если хотите добавить корректно шрифты от Google в дочерние темы.

К примеру, если посмотреть на страницу Blueprint , команда создала тему WPBv4 как кастомную дочернюю тему от фрейморка Genesis . Давайте посмотрим, как добавлять шрифты Google Web в дочернюю тему на основе Genesis .

Как добавить шрифты Google Web Fonts в дочернюю тему на базе Genesis

Откройте дочернюю тему и ее файл functions.php и добавьте в этот файл следующий код:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); function wpb_add_google_fonts() { echo ""; }

Основное, что надо сделать - это посмотреть на код внутри блока genesis_meta . По умолчанию там заданы параметры наподобие META -описаний, ключевых слов, таблицы стилей, фавиконов и т.д. Указав приоритет 5 , мы убедимся, что таблица стилей будет подгружаться до того, как загрузится основная таблица стилей.

К сожалению, мы не можем осветить все существующие родительские и фреймворки, которые есть. Если у вас возникли вопросы по конкретным темам, задавайте их разработчикам и авторам тем в соответствующих ветках форумов для разработчиков тем.

Наша последняя подсказка касательно Google Web Fonts на вашем сайте: не задавайте вопросов и не экспериментируйте с теми шрифтами, которые не собираетесь использовать. К примеру, если вам нужен только нормальный и жирный шрифт, не используйте и не настраивайте все остальные возможные стили для конкретного шрифта. Надеемся, что наш пост поможет вам правильно настроить и использовать шрифты Google Web Fonts на вашем WordPress-сайте.

Всем привет! О том, я писал в уроке 132, можете почитать. А в этой статье, я расскажу, как можно легко и быстро подключить шрифт к своему сайту от Google Fonts. На сервисе Google Font надо подобрать шрифт для своего сайта, а затем подключаем его.

Необязательно файл шрифта загружать на хостинг. Достаточно прописать нужный HTML код в шапку сайта, и в название нового шрифта. Шрифты можно подключать не только на сайт WordPress, но и к любому другому сайту.

Как подключить шрифты Google Font к сайту

Переходим на сервис Google Font по этой ссылке , и выбираем нужный нам шрифт.
Шрифты можно подбирать через фильтр. То есть мы задаем параметры, и таким образом сервис находит шрифты с выбранными параметрами.

Можно задать и другие параметры, если нужно: thickness (толщина шрифта), slant (наклонный), width (ширина шрифта).

Также нужно выбрать кириллицу, если Ваш сайт на русском языке: cirillic (кириллица), или cirillic extended (кириллица расширенный).

Когда параметры будут выбраны, сервис покажет все шрифты, какие есть с этими.

Подводим курсор мыши к шрифту, который хотим установить на сайт, после чего появляются дополнительные настройки/параметры: Quick-use (быстрое использование), Pop out (просмотреть шрифт в отдельном окне) и Add to Collection (добавить в коллекцию).

Выбираем «Quick-use » и видим с правой стороны виджет в виде спидометра. Он показывает, с какой скоростью загружается выбранный шрифт. Чем меньше цифра на этом спидометре, тем лучше.

Еще ниже можно выбрать один из трех вариантов установки шрифта на сайт: standart, @import или javascript.

К каждому варианту есть инструкция на английском языке, как правильно подключить шрифт к сайту. Я Вам покажу первый вариант «standart », потому что он более простой.

Копируем строку выделенную красным цветом, а затем вставляем ее в файл header.php между тегами ….

Потом открываем файл стилей style.css, находим шрифт, который нужно изменить, и прописываем новый. Просто прописываем название нового шрифта. Шрифт Google Fonts помещаем в кавычки, например, font-family: "Aladin",Arial,Helvetica,Sans-serif.

Если Вы совсем ничего не поняли, о чем я тут рассказал, тогда посмотрите видео, где я подробно рассказываю, как подключить шрифт Google Font к сайту WordPress

______________________
К уроку 204. а без плагина

Шрифт играет далеко не последнюю роль в дизайне сайта, он может подчеркнуть общий стиль, помочь пользователю сориентироваться в текстовом контенте. Искать бесплатные шрифты, а потом подключать кучу файлов для разных браузеров – дело не благодарное, но есть выход – шрифты от Google Fonts.

Поиск подходящего шрифта от Google Fonts

Давайте зайдем на сам сервис шрифтов от гугл и разберем его возможности.

В левой (боковой) панели, вы можете настроить параметры фильтрации шрифта и самое главное выбрать его принадлежность к кириллице или латинице.
В верхней части можно сменить отображение демо-текста, в виде: слова, предложения, параграфа, постера. Изменить размер шрифта и ввести свой текст вместо демо варианта.

Подключение шрифта от Google Fonts

После того, как вы выбрали нужный шрифт, жмем по кнопочке “quick-use” (см. картинку, ниже)

На странице подключения шрифта, нужно выбрать:

1. Стили шрифта, жирность, курсив и т.д. Сильно не разгоняйтесь, выбирайте только самое необходимое, т.к. все это влияет на скорость загрузки шрифта и соответственно скорость загрузки текста у вас на сайте. Следите за показателями датчика справа (пункт 5 на картинке)
2. Выбираем какие символы вам необходимы в этом шрифте (в основном латиница и кириллица).
3. Копируем код тега link в блок HEAD
4. Используем объявление шрифта в стилях как показано в пункте 4 (см.картинку)

Несмотря на новые веб-технологии и стартапы, ещё до недавнего времени мы испытывали недостаток в богатой и красивой веб-типографии .

Хотя у нас достаточно широкий выбор гарнитур, мы могли использовать только определённый набор правильных шрифтов, установленных и поддерживаемых большинством компьютеров — эти шрифты были известны как — Безопасные веб-шрифты (Web-safe fonts) .

Веб-типография против печатной типографии

При создании контента на традиционных носителях (газеты, журналы, книги) в использовании типографии вас ограничивает только творческий потенциал.

Но сейчас, разделение между печатными и виртуальными носителями сокращается. Сейчас @font-face поддерживают многие современными браузеры (включая Internet Explorer с версии IE4.0 ).

Введение в Google Font API

Google Font Directory и Google Font API — это бесплатные веб-сервисы от Google , которые предоставляют владельцам сайтов возможность использовать различные шрифты простым, удобным и эффективным способом.

Google Font API — новый представитель ниши , который включает TypeKit , Typotheque и др.

Итак, давайте окунёмся в неисследованный потенциал Google Font API .

Что такое Google Font API?

Вы много путешествовали по интернету, но на многих ли сайтах или блогах вы видели нестандартные шрифты?

Давайте определим нестандартные шрифты, которые не входят в число безопасных (Arial , Helvetica , Verdana , Georgia и Times New Roman ).

Google Font API — это веб-сервис, предоставляющий высококачественные открытые (open source) шрифты, которые легко могут быть использованы в вашем дизайне.

Мы надеемся, что коллекция шрифтов продолжит расти, чтобы у нас был ещё больший выбор различных гарнитур.

Преимущества использования Google Font API

Если вы ещё решаете, использовать ли Google Font API , то вот некоторые из его преимуществ.

Использование HTML текста

В отличие от использования изображений или замены с помощью CSS background-image , использование @font-face , как решения для более привлекательной веб-типографии, более благоприятно в плане SEO .

Кроме того, вам не нужно будет изменять существующий контент - вы только обновите свои CSS таблицы.

Доступность

Поскольку вы используете HTML текст, а не изображение или фон CSS , то это не затрагивает людей, использующих программы для экранного чтения.

Надёжная инфраструктура и снижение нагрузки на ваш сервер

Так как загрузка вашего @font-face использует надёжную инфраструктуру Google , вы можете быть уверены в том, что обслуживание файлов шрифтов будет быстрым, а вы сможете снизить нагрузку на собственный сервер.

Как пользоваться Google Font API

Вам не нужно быть профессиональным веб-разработчиком, чтобы использовать Google Font API . Всё, что нужно для этого сделать — это добавить один элемент stylesheet link на свою страницу, после чего, вы можете начинать использовать этот шрифт в CSS .

Вот обобщённый процесс использования Google Font API :

Шаг 1: Добавление ссылки в таблицу стилей с выбранным шрифтом

Для начала зайдите в коллекцию шрифтов Google , чтобы посмотреть, какие шрифты доступны для использования. Вот основной формат для включения определённого шрифта:

Если вам нужен шрифт для одноразового использования, вы можете объявить стиль одной строкой.

< p style = "font-family: "Font Name", serif" > Six Revisions Is Beautiful < / p >

Шаг 3: Всегда имейте запасной вариант

Вы, возможно, обратили внимание на то, что в предыдущих фрагментах кода мы использовали serif , как запасной шрифт. Это сделано для того, чтобы избежать любых неожиданных результатов. Это означает, что если с серверами Google что-то не так, браузер может использовать свой стандартный шрифт Serif . Сделайте это привычкой, когда используете атрибут font-family , не важно используете ли вы @font-face или нет, всегда указывайте дополнительные шрифты — эта технология называется наборами шрифтов.

Пример использования Google Font API

Скопируйте и вставьте следующий блок кода в свой HTML документ, сохраните его, а затем откройте в своём браузере.

Мы предлагаем проверить свой HTML документ в различных браузерах, так вы сможете увидеть кроссбраузерные различия (или их отсутствие).

Вы можете поэкспериментировать с разными шрифтами, но для примера мы использовали гарнитуру Lobster .

< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href = "http://fonts.googleapis.com/css?family=Lobster" < / strong >> < strong > < / strong > < / head > < body > < h1 > Six Revisions Is Beautiful ! < / h1 > < / body > < / html >

Результат:

Запрос на использование нескольких шрифтов с Google Font API

Скажем, вам нужно три шрифта из Google Font Directory . Не делайте множество запросов . Множественные запросы увеличивают число HTTP запросов. Меньшее количество HTTP запросов уменьшает время отклика веб-страницы.

Вместо множества тегов stylesheet link , используйте следующий формат для свойства href одного тега stylesheet link .

Пример ниже загрузит все три шрифта (Vollkorn , Yanone и Droid Sans ) с помощью одного запроса.

< strong > Vollkorn < / strong > | < strong > Yanone < / strong > | < strong > Droid + Sans < / strong >

Теперь вы можете использовать любой из этих трёх шрифтов в своих стилях.

На что следует обратить внимание

Отделяйте названия шрифтов с помощью | без пробелов. Обратите внимание на использование + в шрифте Droid Sans . Используйте символ + в названиях шрифтов вместо пробела.

Совет: Использование слишком большого количества шрифтов в одном запросе может увеличить время отклика страницы. Загружайте только те шрифты, которые вам действительно нужны. Будьте консервативны.

Параметры Weight и Style шрифтов Google Font API

У веб-шрифтов также имеются различные параметры weight/style . Чтобы их использовать, добавьте к названию шрифта двоеточие (:), а после него укажите style и weight .

В примере ниже мы указываем bold и bold-italic для Vollkorn , и italic для Inconsolata .

http : //fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans

На что нужно обратить внимание

Используйте двоеточие (:) без пробела после названия шрифта, а затем указывайте название стиля (т.е. bolditalic) или соответствующее сокращение (т.е. bi). Если вам нужно много разновидностей одного шрифта, разделите их запятой (,) без пробелов.

Google Font API делает веб-типографию привлекательнее

Индустрия веб-дизайна активно ищет решение старой проблемы выбора и использования веб-шрифтов, и, вроде бы, @font-face является ответом.

Устройства