Сборка красивых шрифтов для сайта

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

Шрифты для заголовков статей и не только

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

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

Выбирайте красивые шрифты, те которые приятно читать.

Шрифт первый. Простое сочетании обыкновенных шрифтов

shrift

font: 22px/24px Arial, Tahoma, sans-serif;

Добавляем этот код  в стиль заголовка или нужного блока, цвет устанавливается color ….


Шрифт второй. Знаменитый Open Sans, красивый и не замудренный. Чтобы вы могли его использовать, я подготовил архив с шрифтами этой серии.

shrift2

Прописываем в стиль заголовка.

font-family: 'Open Sans', sans-serif;
font-size: 19px;
font-weight: bold;
color: #40454d;

В style.css добавляем

@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzCUUniRZcd_wq8DYmIfsw2A.woff2) format('woff2');unicode-range:U+0460-052F,U+20B4,U+2DE0-2DFF,U+A640-A69F;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzOXREeHhJi4GEUJI9ob_ak4.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzI0Uz7fbu6RM5MPetubMKio.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200B-200D,U+20A8,U+20B9,U+25CC;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzPzy0yu4vcvNhe7QLuoE8rU.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzM9-ZSaZ3mOOsU9E1f6DGWc.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzIZI5FoslwusAsZHK_V0XCI.woff2) format('woff2');unicode-range:U+0102-0103,U+1EA0-1EF1,U+20AB;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzBUOjZSKWg4xBWp_C_qQx0o.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000;}

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


Шрифт третий. Элементарная Georgia с некоторыми параметрами

shrift3

font-family: Georgia,serif;
letter-spacing: -.04em;
line-height: 110%;
font-weight: bold;
font-size: 200%;

При необходимости можно поменять параметры.


 Шрифт четвертый, тоже не стандартный шрифт Roboto (скачать архив)

shrift4
Заменяем стиль заголовка

font-family: 'Roboto',sans-serif;
font-size: 24px;
font-weight: normal;

В style.css добавляем

@font-face{font-family:'Roboto';
src:url("путь до файла Roboto-Regular.eot") format('embedded-opentype'),
url("Путь до файла boto-Regular.woff") format('woff'),
url("Путь до файла Roboto-Regular.ttf") format('truetype');font-weight:400;font-style:normal}

@font-face{
font-family:'Roboto';
src:url("Путь до файла Roboto-Light.eot") format('embedded-opentype'),
url("Путь до файла Roboto-Light.woff") format('woff'),
url("Путь до файла Roboto-Light.ttf") format('truetype');
font-weight:300;font-style:normal}

@font-face{font-family:'Roboto';
src:url("Путь до файла Roboto-Bold.eot") format('embedded-opentype'),
url("Путь до файла Roboto-Bold.woff") format('woff'),
url("Путь до файла Roboto-Bold.ttf") format('truetype');font-weight:700;font-style:normal}/*!

После того как скачаете архив и выложите содержимое на сервер, пропишите пути!!!


 Шрифт пятый. Простое сочетание шрифтов

shrift5

font-family: Arial, Helvetica, Sans-Serif;
font-size: 24px;

Как и в предыдущих примерах добавляем в стиль заголовка или нужного блока.


 Шрифт шестой. Один из самых простых шрифтов, которые используют при написании различных документов.

shrift6

font: 32px "Times New Roman", Times, serif;
color: #5a5959;
text-decoration: none;

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

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

На этом закончу данную статью.

А какие шрифты вы используете в своем блоге или сайте? Те которые мне понравятся, я добавлю в статью.