Как подключить и оптимизировать нестандартные шрифты

Выбор шрифта для сайта

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

• Google Fonts – предлагает бесплатные шрифты, созданные профессионалами
• Fonts Adobe – шрифты предлагаются в едином пакете подписки Adobe Cloud.

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

На что стоит обратить внимание при выборе шрифта для веб-сайта:

Толщина шрифта

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

Проверка читаемости

После выбора шрифта с хорошим набором разных толщин, необходимо проверить как он отображается на мобильной и «декстопной» версии сайта. Ведь при нормальном отображении на большом экране, шрифт может оказаться не читаемым на мобильном устройстве. Особенно такое может случаться с очень тонким («Lite») шрифтом. Но так как у шрифта есть несколько толщин, то не составит особого труда сделать его немного толще, где это необходимо.

Сочетание шрифтов

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

Специалисты в веб-дизайне чувствуют и знаю какие шрифты стоит использовать вместе. А вот для начинающих это может быть проблемой, это станет точкой преткновения. Но для таких людей есть помощники в интернете, например, при выборе шрифта в Google Fonts система автоматически предложит сочетающиеся варианты шрифтов. Или можно использовать сервис fontjoy.com — он автоматически подбирает сочетающиеся шрифты, просто нужно нажимать на кнопку «Сгенерировать».

Размер загружаемого шрифта

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

После выбора хорошего шрифта стоит провести тест загрузки, если он не будет устраивать – стоит подобрать другой, более «легкий» шрифт.

Совместимость браузеров

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

Второстепенный шрифт

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

Как установить шрифт на конструкторе сайтов?

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

Работа с веб-шрифтами на uKit

uKit – самый популярный конструктор с визуальным редактором, позволяющий за несколько минут создать профессиональный сайт: для бизнеса, оказания услуг, продажи товаров и других целей. Для изменения шрифта на uKit-сайте достаточно зайти в режим редактирования, перейти на вкладку «Дизайн» и открыть вкладку «Шрифты», где выбрать уже готовую шрифтовую пару (для заголовков и текста) или создать собственную пару из каталога шрифтов.

Работа с веб-шрифтами на Wix

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

Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac

Using Bold Text

You must add another rule containing descriptors for bold text:

Example

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
 
font-weight: bold;
}

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

❮ Previous
Next ❯

Как использовать вариативные шрифты?

Найдите доступный вариативный шрифт

Данная технология достаточно нова, по этому перед тем как начать использовать вариативные шрифты, вам необходимо сначала найти их 🙂 Отличным местом для поиска является v-fonts.com. Тут вы сможете найти кучу различны вариативных шрифтов, поиграться с ними и скачать. Так же список шрифтов можно найти

Интегрируйте шрифты в ваши стили

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

Интеграция вариативного шрифта в целом очень проста. Делаете вы это используя ‘@font-face’

Узнайте какие оси поддерживает шрифт

У каждого шрифта может быть свой набор поддерживаемых осей. Если вы не знаете возможностей своего шрифта, вы можете использовать замечательный тул от Roel Nieskens. Просто перетяните туда свой шрифт. Там же вы сможете скопировать сгенеренный CSS стиля для шрифта и использовать его в своем проекте.

Стилизация вариативного шрифта

• — вес, принимает только от 1 до 999.
• — растяжение, принимает процент. 100% — дефолт, 50% сжатый, 200% сильно растянутый. Название не очень очевидно, ведь по факту это ширина.
• — стиль, принимает наклон, от -90 до 90. Так же по-прежнему будет работать. К слову, большинство шрифтов как правило реализуют наклон до 8 градусов.
• — новое свойство, которое принимает или . По умолчанию браузеры будут ставить свойство в .

Не все шрифты будут поддерживать эти свойства, и не все браузеры поддерживают их на данный момент.

Так же вы можете изменять низкоуровневые свойства с помощью , например:

Того же самого эффекта вы можете достичь с помощью:

И разумеется шрифт может поддерживать какие-либо кастомные свойства, доступ к которым вы будете иметь через тот же :

Полезные ссылки:

• Тут можно поиграться с вариативными шрифтами.
• Анимированна какаха, как демо возможностей кастомизации

П.C. Я достаточно давно не занимался переводом, думаю это дело практики. Если вы заметили какие-либо косяки или не точности, пишите мне в ЛС. Комментарии оставим, для комментирования

upd: Спасибо @gt8on, поправил пару ссылочек
upd: Спасибо MissisRol, поправил перевод 🙂

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft
Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of
Microsoft. OpenType fonts are used commonly today on the major
computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType with
compression and additional metadata. The goal is to support font distribution
from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-face rule
can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use
as embedded fonts on web pages.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

❮ Previous
Next ❯

Get Started

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    : {
      families: 'Droid Sans', 'Droid Serif'
    }
  });
</script>

Alternatively, you can link to the latest version of the Web Font Loader by using as the source. Note that the version in this url is less specific. It will always load the latest version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. For performance reasons, we recommend using an explicit version number (such as ) in urls when using the Web Font Loader in production. You can manually update the Web Font Loader version number in the url when you want to adopt a new version.

<script>
   WebFontConfig = {
      typekit: { id: 'xxxxxx' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts;
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);
</script>

The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the class on the HTML element as soon as has been called. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided.

Web Font Loader is also available on npm as a CommonJS module. Just and then require it in your code.

  var WebFont = require('webfontloader');

  WebFont.load({
    : {
      families: 'Droid Sans', 'Droid Serif'
    }
  });

Инструментарий для Веб-шрифтов

Font Squirrel Генератор

ГенераторEthan Dunham

• FontForge полновесный редактор шрифтов со всевозможными конфигурируемыми вкусностями на стороне сервера. Открытый исходный код.
• sfnt2woff это набор утилит с открытым исходным кодом для упаковки TTF и OTF CFF шрифтов в WOFF-файлы.
• ttf2eot это предшественник EOTFAST. Он создает несжатые «легкие» EOT-файлы.
• TTX это средство конвертации OpenType и TrueType шрифтов в и из XML.
• Fontue это движок с открытым исходным кодом для вывода веб-шрифтов и скриптов для обработки шрифтов. Приветствуются вклады в Github.
• WebFont Loader это JavaScript-библиотека, которая позволяет лучше контролировать загрузку шрифтов, чем позволяет Google Font API. Создана в сотрудничестве между Google и TypeKit.

Как добавить шрифт на сайт

Идем на сайт www.google.com/fonts/, выбираем язык шрифта (русский шрифт отображается в меню слева, как Cyrillik). Для того чтобы скачать, нажмите на кнопку donwload.

Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.

Стандартное подключение скачанных шрифтов выглядит так

@font-face { font-family: 'Имя_шрифта_любое'; src: url('Имя_файла_шрифта.eot'); src: url('Имя_файла_шрифта.eot?#iefix') format('embedded-opentype'), url('Имя_файла_шрифта.woff') format('woff'), url('Имя_файла_шрифта.ttf') format('truetype'), url('Имя_файла_шрифта.svg#DSNoteRegular') format('svg'); font-weight: normal; font-style: normal;}

Пример подключения:

/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }

Как подключить google шрифт к сайту.

Чтобы подключить шрифт к сайту, перейдите на вкладку EMBED, там вы увидите 2 способа подключения:

1. STANDARD — через html-тег link, его нужно разместить в head.

1. @IMPORT

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic');

Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила:  font-family: ‘Roboto’, sans-serif; об этом будет еще ниже

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

body {        font-family: 'Roboto', sans-serif;        font-size: 16px;      }

Если остались вопросы, вы можете заглянуть в руководство от гугла: developers.google.com/fonts/docs/getting_started

Как добавить шрифты Google в WordPress

Теперь, вы можете выбрать шрифт из списка, давайте посмотрим, как можно добавить его на свой сайт WordPress.

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

1. Войдите в Панель управления WordPress

1. Перейдите в раздел Плагины > Добавить новый

1. Поиск “Easy Google Fonts”

1. Найдите плагин “Easy Google Fonts” и нажмите кнопку «Установить сейчас». Активировать его.

1. Перейдите в Настройки > Google шрифты и создайте “новый элемент управления шрифтами.”

1. Затем перейдите в раздел темы > Настройка > типографика, чтобы указать, какие шрифты используются для какого объекта.

И напоследок!

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

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

Кроме того, не забудьте поделиться статьёй со своими друзьями!

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

http://web-revenue.ru/instrumenti/servisy/google-web-fonts

http://www.webdesguru.com/5-besplatnyh-shriftov-dlya-idealnyh-zagolovkov/

Друзья! Приглашаем вас к обсуждению. Если у вас есть своё мнение, напишите нам в комментарии.

Действительно ли нам необходимо так много разных стилей?

Давайте остановимся и спросим себя, зачем нам нужны разные стили шрифта? Типографика придает словам смысл посредством дизайна, что означает хорошая типография может поддерживать контент, плохая (или неуместная) типография — портить. Текст может быть отформатирован различными стилями того же шрифта

Например жирный текст, выделяет, что-то важное. А что-то важное, не будет выделятся, если шрифт монотонный и все выглядит одинаково

Разумеется можно например использовать цвет, но это совсем другая история. Одаренные дизайнеры любят БОЛЬШОЙ И ЖИРНЫЙ ТЕКСТ красного цвета на билбордах.

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

Пример использования кастомных осей:

Веб-шрифты

Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:

Во-первых, у вас есть блок в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff");
}

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

1. Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
2. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.

Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

Гротески

Neue Machina. Бесплатный вариативный гротеск с кириллицей, выпущенный Pangram Pangram. Презентацию оформил Васьен Катро aka Baugasm

Обратите внимание — ловушки для чернил (inktraps) вошли в моду

PT Root UI. Новый бесплатный шрифт компании Паратайп. Предназначен специально для интерфейсов, содержит 4 начертания.

Inter. Бесплатный гротеск с кириллицей в 8 начертаниях. Сделал дизайнер из команды Figma. Открытые исходники.

Greenwich. Современный гротеск с кириллицей по мотивам английских шрифтов начала 20 века. Цена за каждое отдельное начертание от 35 $. Два начертания доступны бесплатно.

Closer. Семейство гуманистических гротесков с кириллицей от Mint Type. Низкий контраст и очень закрытая апертура. 18 начертаний (9 прямых + италики), 7 наборов стилистических альтернатив. Два начертания раздают бесплатно, остальные от 35 $.

Closer Text. Семейство закрытых гуманистических гротесков для набора. Начертания Text Light и Text Light Italic бесплатные, остальные 16 стоят от 35 $ по отдельности и от 159 $ вместе. 

FE Hero. Ультра-узкий гротеск с кириллицей. Идеально подходит для киноафиш и технических надписей. Можно использовать бесплатно в персональных проектах, коммерческая лицензия обойдётся всего в 299 ₽.

Vocal. Семейство гротесков с кириллицей. В гарнитуре 28 шрифтов толщиной от волосяного до хэви. Все вместе от 260 $, отдельные начертания от 35 $, начертание Light бесплатное.

Noah. 4 начертания этого семейства гротесков Fontfabric можно скачать бесплатно. Остальные 78 стоят от 299 $.

Mozer. Гарнитура Fontfabric с кириллицей. Полуузкий неогротеск, 16 начертаний. Начертание Semi Bold бесплатное. Остальные от 29 $. Вся семья от 169 $.

Kardinal. Гуманистический гротеск в 16 начертаниях (8 прямых + 8 италиков) с кириллицей. Два начертания бесплатные, остальные от 30 $, вся семья от 180 $.

Lil Stuart. Пара бесплатных шрифтов с латиницей: гротеск и скрипт. Повторяется в разделе с рукописными шрифтами.

Sriracha

• Дата создания: 2008 год
• Всего стилей: 1 шт.
• Используют: 43 000 сайтов

Sriracha – прописной шрифт в неформальном, располагающем стиле. Был разработан для брендирования бутиков тайской фирмой Cadson Demak. За счёт небольшого наклона букв и несимметричных скруглений шрифт выглядит динамично, написанное им выглядит привлекательно, дружелюбно. Может быть с одинаковым успехом использован как магазинами одежды, парфюмерии, кафе, так и индустриальными предприятиями, СТО, заправками и т. д. Изящные направления он стабилизирует, вносит нотку практичности, не теряя лоска, а серьёзные – смягчает, добавляя им шарма, но не превращая подачу в цирк.

Имитация кисти

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

Brittania

Изящный шрифт с завивающимися росчерками.  Свадебное приглашение с использованием такого шрифта будет выглядеть весьма привлекательно.  Дизайнер шрифта Barmawy Muchtar.

Скачать шрифт Brittania

Bafora

Это размашистое начертание позволит создать имитацию кисти максимально реалистично. Дизайнер действительно постарался над детализацией. Не рекомендуем использовать на мелких носителях т.к. детали сольются и эффект выйдет уже не тот. Творец компания Craft Supply.

Скачать шрифт Bafora

Cratti Script

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

Скачать шрифт Cratti Script

Granotta Script

Граната в шрифтовом дизайне. Хорошо вымеренные буквы довольно удачно соединены между собой и не сливаются в кашу как некоторые собратья.  Изготовитель гарнитуры Gameboth Studio.

Скачать шрифт Granotta

Kallisa

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

Скачать шрифт Kallisa

Rommantis

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

Скачать шрифт Rommantis

Slopes Brush

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

Скачать шрифт Slopes Brush

Mistral

А вот и платный аналог. Этот новый шрифт заслуживает внимания уже потому, что он один из немногих рукописных шрифтов, который поддерживает русский язык. Mistral легко может стать частью стильного брендинга. Но есть и ограничения. Не рекомендуем использовать этот шрифт для набора большого объема текста. Дизайнер Roman Poliishchuk.

Купить шрифт Mistral

Человеческая психология причудливых шрифтов.

Эксперимент, в нём участвовали две группы людей – первая, которая получила печатное меню простым шрифтом, а другая получила печатное меню причудливым шрифтом.
Результаты? Не то, что вы ожидали.
Люди, получившие напечатанное меню в причудливых шрифтах, предполагали, что у шеф-повара больше навыков. В то время как другая группа, которая получила меню, написанное простым шрифтом, думала, что шеф-повар не такой опытный.
Что заставило их поверить в это? Необычные шрифты спровоцировали мысль, что на создание продукта ушло больше работы.
Как говорят исследователи, “если вы продаете дорогостоящий продукт, описание его с помощью трудно читаемого шрифта подтолкнёт зрителя к тому, что на создание этого продукта ушло больше усилий.”
Список не сортируется по определенному порядку или предпочтению. Я буду продолжать добавлять более удивительные шрифты Google в список с течением времени, поэтому не забудьте либо добавить эту страницу в закладки, либо подписаться на нашу группу вконтакте.