Site icon Vavik96

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

admin

Хороший шрифт найти трудно. Дизайнеры и вебмастера очень разборчивы, когда дело доходит до шрифтов для конкретного проекта и, как правило, больше всего времени тратится на поиск. С этой подборкой вы можете пропустить неприятную часть поиска и сортировки и перейти сразу к выбору скриптов и шрифтов, которые идеально подходят для вашего сайта.
Все шрифты представлены с кодом 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 не нуждается в представлении, он стал одним из самых распространенных шрифтов в последние несколько лет. Вторая версия дает вам выбор между жирной и тонкой версией.

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

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

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, безусловно, имеет свои преимущества. Буквы как бы написаны кистью с резкой направленностью, которая хорошо передает движение.

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 простопрекрасен, закруглённый и витиеватый шрифт, который на самом деле имеет уникальный вид. Трудно найти жирный шрифт с такими красивыми линиями, поэтому обязательно в закладки.

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 эффект, но это выглядит здорово (или даже лучше) даже без них.

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 имеет отличную текучесть с широкими дугами и вензелями. Это прекрасный шрифт для логотипа и действительно и действительно здорово, что он доступен в качестве веб-шрифта.

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 имеет женской шарм, что делает его отличным шрифтом для заголовков. В следующий раз, когда вам понадобится причудливый шрифт, вы должны попробовать его.

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, но немного тоньше и сложнее. Он действительно красивый и наверняка привлечет внимание.

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 жирный и утилитарный. Он довольно мужской, насколько это возможно для шрифта, и идеально подходит для больших, смелых заявлений.

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 насчитывает более ста шрифтов, но многие из них на самом деле не стоит использовать вообще, и выбор среди такого количества может занять много времени. Мы надеемся, что эта статья поможет вам сэкономить время.

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

Exit mobile version