Красивые шрифты от Google Web Fonts

Google Web Fonts — каталог бесплатных шрифтов от Google. Данный сервис позволяет использовать любые понравившиеся вам шрифты на своем сайте. Выбранные шрифты подгружаются на ваш сайт с CDN-хостинга. Не рекомендуется загружать большое количество шрифтов, так как это сказывается на скорости загрузки страниц сайта. После выбора шрифтов вы увидите индикатор загрузки страницы в правом верхнем углу.

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

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

1. «Playfair Display SC» + Arimo

Playfair-Display-SC+Arimo

Разметка HTML

<h2>красота природы</h2>
<div class="post-detail">
    <span class="post-info">
        <span>Август 22, 2015</span>
    </span>
</div>
<div class="post">
  <p>Красота природы таится во всем, что нас окружает – и в солнечном дне и ласковом море, которое плещется у нас под ногами...</p>
</div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic|Playfair+Display+SC:400,700&subset=latin,cyrillic);
h2 {
  font-family: 'Playfair Display SC', serif;
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 24px;
  color: #222222;
  text-align: center;
}
.post-detail, .post {
  font-family: 'Arimo', sans-serif;
}
.post-detail {
  width: 30%;
  margin: 0 auto 10px;
  text-align: center;
  }
.post-info {
  color: #be9656;
  font-style: italic;
  position: relative;
  display: block;
  font-size: 13px;
}
.post-info:before {
  content: "";
  border-bottom: 1px solid #be9656;
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
}
.post-info span {
  display: inline-block;
  padding: 0 1.2em;
  background: #ffffff;
  position: relative;
  z-index: 2;
}
p {
  font-size: 14px;
  line-height: 1.7;
  color: #444444;
}

2. Lora

font-lora

Разметка HTML

<div class="post-header">
  <div class="post-cat">
    <a href="#">Вдохновение недели</a>
  </div>
  <div class="post-title">
    <h2>
      <a href="#">Неожиданный дизайн обычных вещей</a>
    </h2>
  </div>
  <div class="post-meta">Автор <a href="#">Админ</a> / 2 Комментария</div>
  <div class="border">
    <span></span>
    <span></span>
    </div>
  </div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic);
body {margin:0;}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
.post-header {
  position: relative;
  background: #BCE3EA;
  padding: 25px;
  text-align: center;
  z-index: 2;
}
.post-cat a {
  display: inline-block;
  font-size: 10px;
  margin: 5px 25px;
  color: white;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #937338;
  line-height: 20px;
  height: 20px;
  position: relative;
}
.post-cat a:before, .post-cat a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid #937338;
  top: 0;
}
.post-cat a:before {
  left: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  border-left-color: transparent;
}
.post-cat a:after {
  right: 0;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  border-right-color: transparent;
}
.post-title {
  text-transform: uppercase;
}
.post-title h2 {
  font-family: 'Lora', serif;
  font-weight: normal;
  line-height: 1.8em;
  font-size: 20px;
  color: white;
  margin: 13px 0 8px;
  letter-spacing: 0.08em;
}
.post-meta {
  font-size: 10px;
  text-transform: uppercase;
  color: #937338;
  letter-spacing: 0.2em;
}
.border {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  overflow: hidden;
  z-index: -1;
}
.border:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #937338;
}
.border span:before, .border span:after {
  content: "";
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #937338;
  background: #BCE3EA;
}
.border span:nth-child(1):before {
  top: -18px;
  left: -18px;
}
.border span:nth-child(1):after {
  top: -18px;
  right: -18px;
}
.border span:nth-child(2):before {
  bottom: -18px;
  left: -18px;
}
.border span:nth-child(2):after {
  bottom: -18px;
  right: -18px;
}

3. «Playfair Display» + «Open Sans»

Playfair-Display+Open-Sans

Разметка HTML

<div class="post">
  <img src="https://html5book.ru/wp-content/uploads/2015/09/paris.jpg">
  <div class="post-container">
    <h2>День в Париже</h2>
    <h3>Сентябрь 1, 2015 <span><a href="#">admin</a></span>
    </h3>
    <div class="post-info">
      <p>Париж великолепен. Шумный  и изысканный, чопорный и демократичный Париж ...</p>
    </div>
  </div>
</div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,700,400italic,700italic&subset=latin,cyrillic);
* {box-sizing: border-box;}
body {margin: 0;}
.post {
  width: 60%;
  margin: 30px auto 0;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.post-container {
  width: 100%;
  padding: 30px;
}
h2 {
  margin: 15px 0;
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  text-align: center;
  letter-spacing: 2px;
  color: #c2a77a;
}
h3 {
  font-size: 13px;
  margin: 0;
  color: #b5b5b5;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: 1.4px;
  text-align: center;
}
h3 a {
  color: #c2a77a;
}
p {
  font-family: 'Open Sans', sans-serif;
  color: #2f2f2f;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  margin-top: 0;
}
.post-info {
  padding-top: 35px;
}

4. Comfortaa + «Didact Gothic»

Comfortaa+Didact-Gothic

Разметка HTML

<div class="wrap">
  <div class="cat">
    <span>Мода</span>
  </div>
  <h2>Новая коллекция Zara</h2>
  <div class="post">
    <span class="public">Опубликовано 10 апреля, 2015</span>
    <p>Джинсовые кюлоты, удлиненные жилеты, полушубки из искусственного меха и многое другое в новой рекламной кампании Zara TRF осень-зима 2015-2016.</p>
    <a class="more-link" href="#">
	<span class="more-button">ПРОДОЛЖИТЬ ЧТЕНИЕ</span>
    </a>
  </div>
</div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Didact+Gothic|Comfortaa:400,700&subset=latin,cyrillic);
*, *:before, *:after{box-sizing:border-box}
.wrap {
  position: relative;
  margin: 50px auto;
  text-align: center;
  width: 320px;
  height: 370px;
  background: white;
  padding: 30px 40px;
  border: 1px solid rgba(0,0,0,.1);
}
.wrap:before, .wrap:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border: 1px solid rgba(0,0,0,.1);
  background: white;
}
.wrap:before {
  top: 5px;
  left: -5px;
  z-index: -1;
}
.wrap:after {
  top: 10px;
  left: -10px;
  z-index: -2;
}
.cat span {
  font-family: 'Comfortaa', cursive;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #ff6f5a;
  font-weight: bold;
}
h2 {
  font-family: 'Comfortaa', cursive;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #333333;
}
.public {
  font-family: 'Didact Gothic', sans-serif;
  color: #999999;
  font-size: 13px;
}
p {
  font-family: 'Didact Gothic', sans-serif;
  color: #555555;
  font-size: 14px;
  line-height: 22px;
}
.more-button {
  font-family: 'Comfortaa', cursive;
  color: #333333;
  font-size: 11px;
  padding-bottom: 8px;
  display: inline-block;
  margin: 35px 0 20px;
  text-transform: uppercase;
  position: relative;
  font-weight: bold;
  letter-spacing: 1px;
  -webkit-transition: .35s linear;
  -moz-transition: .3s linear;
  -o-transition: .3s linear;
  transition: .3s linear;
}
.more-button:before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: 0;
  height: 1px;
  width: 40px; 
  background: #333333;
  -webkit-transition: .3s linear;
  -moz-transition: .3s linear;
  -o-transition: .3s linear;
  transition: .3s linear;
}
.more-button:hover {
  color: #ff6f5a;
}
.more-button:hover:before {
  background: #ff6f5a;
} 

5. «Tenor Sans» + «Pt Serif»

Tenor-Sans+Pt-Serif

Разметка HTML

<div class="post">
<div class="post-header">
  <h1>10 лучших мест для путешествия</h1>
  <div class="dots"><span></span></div>
  <div class="info">
    <span>Путешествия, Приключения</span><span> - </span><span>Автор</span><span> - </span> <span>Сентябрь 15, 2015</span>
  </div>
  </div>
<figure>
  <img src="https://html5book.ru/wp-content/uploads/2015/09/travel.jpg">
  <figcaption>Вы готовы к путешествиям?</figcaption>
</figure>
<p>Это очень интересно – думать о возможностях. Может быть, отдохнуть от беготни на тропическом пляже...</p>
</div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Tenor+Sans|PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic);
body {
  margin: 0; 
}
.post {
  width: 660px;
  margin: 0 auto;
  text-align: center;
}
.post-header {
  margin-bottom: 35px;
}
h1 {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 26px;
  color: #111;
  letter-spacing: 2px;
  line-height: 1.4em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.dots span{
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #DDDDDD;
  border-radius: 50%;
  box-shadow: 12px 0 0 0 #DDDDDD, 24px 0 0 0 #DDDDDD, -12px 0 0 0 #DDDDDD, -24px 0 0 0 #DDDDDD;
}
.info {
  margin-top: 14px;
}
span {
  font-size: 14px;
  font-style: italic;
  color: #999;
  font-family: 'PT Serif', serif;
}
figure {
  position: relative;
  margin: 0 0 30px;
}
figure:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 20px solid white;
  left: calc(50% - 14px);
  left: -webkit-calc(50% - 14px);
  top: 0;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
figcaption {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  color: white;
  letter-spacing: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 1.6;
  background: rgba(0,0,0,.6);
  padding: 15px;
}
p {
  font-family: 'PT Serif', serif;
  line-height: 1.8;
  color: #555555;
  font-size: 14px;
}

6. «Roboto Slab» + «PT Sans Caption»

roboto-pt-sans

Разметка HTML

<div class="wrap">
  <div class="inner">
  <h2>Ягодный пирог</h2>
    <span class="line"></span>
  <p>Ягодный пирог - рецепт аппетитного летнего блюда для всей семьи. Порадуйте свою семью ароматной выпечкой!</p>
  <a href="">Рецепт</a>
  </div>
</div>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|PT+Sans+Caption&subset=latin,cyrillic);
*, *:before, *:after{transition:.3s linear}
.wrap {
  width: 280px;
  height: 380px;
  padding: 20px;
  background: url(https://html5book.ru/wp-content/uploads/2016/05/cake.jpg);
  background-size: cover;
  text-align: center;
  position: relative;
  color: white;
  line-height: 1.5;
  margin: 50px auto 0;
}
.wrap:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(53, 60, 68, 0.4);
    height: 100%;
    width: 100%;
    z-index: 1;
   }
.inner {
  position: relative;
  z-index: 2;
  height: 100%;
}
h2 {
  font-family: 'Roboto Slab', serif;
  font-weight: normal;
}
.line {
  display: block;
  margin: 20px auto;
  position: relative;
  width: 54px;
  height: 1px; 
  background: white;
}
.line:before {
  content: "";
  position: absolute;
  width: 38px;
  margin: 0 auto;
  top: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: white;
}
.line:after {
  content: "";
  position: absolute;
  width: 22px;
  margin: 0 auto;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: white;
}
p, a {
  font-family: 'PT Sans Caption', sans-serif;
  font-size: .8em
}
a {
  text-decoration: none;
  display: block;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -55px;
  width: 110px;
  padding: 8px 12px;
  text-transform: uppercase;
  border: 1px solid;
  color: white;
  box-sizing: border-box;
}
a:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 10px;
  border-top: 1px solid;
  border-left: 1px solid
}
a:after{
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 20px;
  border-bottom: 1px solid;
  border-right: 1px solid
}
a:hover:before {
  width: 10px;
  height: 20px;
}
a:hover:after {
  width: 20px;
  height: 10px;
}

P.S. Коллекция будет пополняться. Вы также можете внести свой вклад в ее продолжение, написав в комментариях примеры удачных сочетаний шрифтов из коллекции Google. Буду вам очень признательна!

  • Создание Сайтов

    Шрифты красивые, но они не вяжутся с красивыми сайтами.

  • Scripter

    Угу

  • Ilya Melnikau

    Классно, не слушайте лохопедов