Уникальные шрифты: Google Fonts

Каждый веб-дизайнер встает перед выбором шрифтов для своего проекта. Сегодня мы рассмотрим API от гугла Google Fonts. Плюс шрифтов от гугла в том, что нам не требуется ничего скачивать. Мы просто подключаем нужный шрифт, прописываем стили CSS и все. В этой статье я приведу готовые куски кода для каждого из шрифтов, которые поддерживают кириллические символы.

Посмотреть демо

Почему именно Google Fonts?

Достаточно долго продолжались дебаты по-поводу веб шрифтов. Было много разных идей и решений. Но понять кто выиграет было невозможно. А итогом борьбы стала победа @font-face.

Давайте посмотрим почему же победу одержал @font-face. Во-первых, достаточно чистый и простой CSS код. Во-вторых, @font-face поддерживает выделение и копипаст, что порадовало экспертов по юзабилити. И последнее — возможность самого широкого применения @font-face. Любой вебмастер может с помощью @font-face создать абсолютно любой шрифт.

Сейчас же соревнование происходит уже внутри мира @font-face. Кто-то использует шрифты с FontSquirrel.com. Чтобы использовать шрифты с FontSquirrel.com достаточно выбрать и скачать нужный комплект, а после подключить их с помощью CSS стилей. Кстати, недорого купить грузовой аккумулятор фирменный вы всегда сможете в компании http://akbmarket.od.ua/. Рекомендуем вам к сотрудничеству данную компанию!

Мы же сегодня будем использовать Google Fonts. Шрифты от гугла бесплатны и опциональны.

Советы при комбинировании шрифтов

Перед тем, как мы начнем работать со шрифтами, я хотел бы поделиться несколькими советами по комбинированию шрифтов.

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

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

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

Подумайте о том, какие шрифты подходят.
Подбирайте шрифты под содержание. Если вы пишите о чем-то современном или профессиональном используйте шрифты, которые выглядят так же современно. Если же ваш контент связан с ретро, то шрифт типа Helvetica Neue Ultra Light наврядли подойдет.

Шрифты

Закончим дискуссии и перейдем к делу. Посмотрим какие шрифты предлагает нам Google Fonts Directory. Если вы прежде не работали с Google Fonts то не пугайтесь — нет ничего проще. Все что вам нужно сделать это добавить ссылку на шрифт в head вашего сайта. Для каждого шрифта я приведу сниппеты, которые вам нужно будет просто скопировать и вставить в файл со стилями.

Jura

HTML

CSS

h1 { font-family: 'Jura', arial, serif; }

Ruslan Display

Довольно интересный шрифт. Неплохо привлекает внимание и похож на древнерусский.
HTML

CSS

h1 { font-family: 'Ruslan Display', arial, serif; }

Play

Шрифт, который хорошо подойдет для различных сайтов игровой тематики. Выглядит современно.
HTML

CSS

h1 { font-family: 'Play', arial, serif; }

Didact Gothic

HTML

CSS

h1 { font-family: 'Didact Gothic', arial, serif; }

Open Sans Condensed

HTML

CSS

h1 { font-family: 'Open Sans Condensed', arial, serif; }

EB Garamond

Очень красивый шрифт с засечками.
HTML

CSS

h1 { font-family: 'EB Garamond', arial, serif; }

PT Serif Caption

HTML

CSS

h1 { font-family: 'PT Serif Caption', arial, serif; }

Cuprum

HTML

CSS

h1 { font-family: 'Cuprum', arial, serif; }

Anonymous Pro

HTML

CSS

h1 { font-family: 'Anonymous Pro', arial, serif; }

Philosopher

HTML

CSS

h1 { font-family: 'Philosopher', arial, serif; }

Lobster

HTML

CSS

h1 { font-family: 'Lobster', arial, serif; }

Ubuntu

HTML

CSS

h1 { font-family: 'Ubuntu', arial, serif; }

Neucha

HTML

CSS

h1 { font-family: 'Neucha', arial, serif; }

Посмотреть демо

Так же обратите внимание на вот эту подборку 50+ Лучших бесплатных кириллических шрифтов для дизайна

Заключение

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

Хотелось бы узнать ваши предпочтения: какой из шрифтов вам больше всего по-душе и используете ли вы их в своих проектах? Делитесь своими предпочтениями и мыслями в комментариях.