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

Опубликовано: 28 сентября 2015 Обновлено: 18 января 2021 3 комментария

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

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

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

1. «Playfair Display SC» + Arimo

Playfair-Display-SC+Arimo

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

<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>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700&subset=latin,cyrillic);
*, :after, :before {
    box-sizing: border-box;
}
body {
  margin: 0;
}
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;
  transform: translateX(-100%);
  border-left-color: transparent;
}
.post-cat a:after {
  right: 0;
  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

<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>
@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

<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>
@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; 
   transition: .3s linear;
}
.more-button:before {
   content: "";
   position: absolute;
   left: 50%;
   margin-left: -20px;
   bottom: 0;
   height: 1px;
   width: 40px;
   background: #333333;
   transition: .3s linear;
}
.more-button:hover {
   color: #ff6f5a;
}
.more-button:hover:before {
   background: #ff6f5a;
}

5. «Tenor Sans» + «Pt Serif»

Tenor-Sans+Pt-Serif

<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>
@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

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

Поделиться: