Каждый веб-дизайнер встает перед выбором шрифтов для своего проекта. Сегодня мы рассмотрим 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 не заработают.
Хотелось бы узнать ваши предпочтения: какой из шрифтов вам больше всего по-душе и используете ли вы их в своих проектах? Делитесь своими предпочтениями и мыслями в комментариях.
Мне понравился Jura, но что то русские буквы не очень на нем смотрятся
Использую Cuprum и Neucha,и симпатичные и кириллица.
А что за шрифт в заголовке статьи ???
DroidSansRegular и применена тень с помощью text-shadow
Ruslan Display это на самом деле шрифт украинского графика Снарского (Устав Снарского), который был оцифрован дизайнером Геннадием Заречнюком (fonts.org.ua). Но об этом Denis Masharov почему-то умолчал.
Почему умолчал?
Читайте сопроводительный текст, все указано )))
Если вы его оцифровывали самостоятельно то претензий нет..
Open Sans Condensed не работает с кириллицей!
Подскажите а как просмотреть как еще кирилические шрифты есть в Google???
заходите на google fonts и выбираете cyrillic — увидите все шрифты, которые поддерживают кириллицу