10 Лучших скриптов и рукописных шрифтов Google Web Fonts

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

Oleo Script

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

Скриншот

HTML

<link href="http://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

 

Lobster Two

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

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

 

Berkshire Swash

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

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

 

Merienda One

Merienda, безусловно, имеет свои преимущества. Буквы как бы написаны кистью с резкой направленностью, которая хорошо передает движение.

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.2 'Merienda One', Helvetica, sans-serif;
  color: rgba(0,0,0,0.7);
  text-shadow: 3px 3px 3px #fff;
}

 

Pacifico

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

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}

 

Just Another Hand

Если вы ищете что-то, что выглядит действительно написанным от руки, Just Another Hand является хорошим выбором. Чтобы добавить визуальный объём, можно использовать тени, что придаст ему 3D эффект, но это выглядит здорово (или даже лучше) даже без них.

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Just+Another+Hand" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.0 'Just Another Hand', Helvetica, sans-serif;
  color: #969595;
  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}

 

Arizonia

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

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.3 'Arizonia', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

 

Cookie

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

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}

 

Great Vibes

Great Vibes является очень интересным, похожим на Arizonia, но немного тоньше и сложнее. Он действительно красивый и наверняка привлечет внимание.

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}

 

Leckerli One

Leckerli One жирный и утилитарный. Он довольно мужской, насколько это возможно для шрифта, и идеально подходит для больших, смелых заявлений.

screenshot

HTML

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css">

CSS

h2 {
  font: 400 100px/1.2 'Leckerli One', Helvetica, sans-serif;
  color: #000;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);
}

Библиотека Google Web Font насчитывает более ста шрифтов, но многие из них на самом деле не стоит использовать вообще, и выбор среди такого количества может занять много времени. Мы надеемся, что эта статья поможет вам сэкономить время.

Какой из шрифтов ваш любимый? Вы использовали какой-либо из них в живых примерах? Покажите!
Источник

3 thoughts on “10 Лучших скриптов и рукописных шрифтов Google Web Fonts

  • 31/08/2016 в 15:56
    Permalink

    Скриншоты не отображаются !

    Ответ
  • 07/05/2018 в 01:31
    Permalink

    Ну-ну! все указанные шрифты, видимо. не содержат русских букв?
    Однако! И их Вы предлагается для русскоязычных сайтов применять?
    Ну-ну!

    Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.