Какой шрифт использовать

Configuration

The Web Font Loader configuration is defined by a global variable named , or passed directly to the method. It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events. When using the asynchronous approach, you must define the global variable before the code that loads the Web Font Loader (as in the example above).

Events

Web Font Loader provides an event system that developers can hook into. It gives you notifications of the font loading sequence in both CSS and JavaScript.

• — This event is triggered when all fonts have been requested.
• — This event is triggered when the fonts have rendered.
• — This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.
• — This event is triggered once for each font that’s loaded.
• — This event is triggered once for each font that renders.
• — This event is triggered if the font can’t be loaded.

CSS events are implemented as classes on the element. The following classes are set on the element:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

The placeholder will be replaced by a sanitized version of the name of each font family. Spaces and underscores are removed from the name, and all characters are converted to lower case. For example, becomes . The placeholder is a Font Variation Description. Put simply, it’s a shorthand for describing the style and weight of a particular font. Here are a few examples:

/* n4 */
@font-face { font-style: normal; font-weight: normal; }

/* i7 */
@font-face { font-style: italic; font-weight: bold; }

Keep in mind that maps to and maps to . If no style/weight is specified, the default () will be used.

If fonts are loaded multiple times on a single page, the CSS classes continue to update to reflect the current state of the page. The global class is applied whenever fonts are being requested (even if other fonts are already active or inactive). The class is applied only if none of the fonts on the page have rendered. Otherwise, the class is applied (even if some fonts are inactive).

JavaScript events are implemented as callback functions on the configuration object.

WebFontConfig = {
  : function() {},
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}
};

The , and callbacks are passed the family name and font variation description of the font that concerns the event.

It is possible to disable setting classes on the HTML element by setting the configuration parameter to (defaults to ).

WebFontConfig = {
  classes: false
};

You can also disable font events (callbacks) by setting the parameter to (defaults to ).

WebFontConfig = {
  events: false
};

If both events and classes are disabled, the Web Font Loader does not perform font watching and only acts as a way to insert @font-face rules in the document.

Timeouts

Since the Internet is not 100% reliable, it’s possible that a font will fail to load. The event will be triggered after 5 seconds if the font fails to render. If at least one font successfully renders, the event will be triggered, else the event will be triggered.

You can change the default timeout by using the option on the object.

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  timeout: 2000 // Set the timeout to two seconds
};

The timeout value should be in milliseconds, and defaults to 3000 milliseconds (3 seconds) if not supplied.

Iframes

Usually, it’s easiest to include a copy of Web Font Loader in every window where fonts are needed, so that each window manages its own fonts. However, if you need to have a single window manage fonts for multiple same-origin child windows or iframes that are built up using JavaScript, Web Font Loader supports that as well. Just use the optional configuration option and give it a reference to the target window for loading:

WebFontConfig = {
  : {
    families: 'Droid Sans'
  },
  context: frames'my-child'
};

This is an advanced configuration option that isn’t needed for most use cases.

Гротески

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

Koliko

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

• Скачать шрифт Koliko
• Скачать шрифт Koliko Light
• Скачать шрифт Koliko Bold

Acrobat

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

• Скачать шрифт Acrobat Thin
• Скачать шрифт Acrobat Extra Light
• Скачать шрифт Acrobat Light
• Скачать шрифт Acrobat Regular
• Скачать шрифт Acrobat Semibold
• Скачать шрифт Acrobat Bold
• Скачать шрифт Acrobat Extra Bold
• Скачать шрифт Acrobat Black

Uni Neue

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

• Скачать шрифт Uni Neue
• Скачать шрифт Heavy Italic

Какой шрифт лучше использовать для сайта

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

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

Как узнать шрифт на сайте

Нет ничего проще. Заходим на любой понравившийся сайт. Пусть это будет Блог Касперского.

Нажимаем одновременно клавиши + И получаем исходный код страницы. В котором среди прочего будет ссылка на файл стилей.

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

Как видим блог Касперского использует популярный шрифт Open Sans от Google. И если он (шрифт) вам нравится, то после прочтения данной статьи вы знаете как использовать его на своем сайте.

Полезности

• HTML шорты: посторонние шрифты. Про подключение шрифтов и методы оптимизации.
• Статья о font-display. В ней кроме прочего приведена наглядная схема того, как работают все значения свойства.
• Исчерпывающее руководство по стратегиям загрузки веб-шрифтов. Подробный разбор плюсов и минусов методов подключения и оптимизации шрифтов.
• Оптимизация шрифтов. В статье разобраны разные методы: использование сабсетов шрифтов в зависимости от языка, HTTP-кеширование, Font Loading API и так далее.
• Доклад Вадима Макеева про шрифты.
• Subsetting Fonts with Glyphhanger. Статья о том, как использовать инструмент для создания сабсетов.

С засечками или без?

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

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

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

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

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

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

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

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

Подключение шрифтов с помощью Google Fonts

Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в  ссылку, которую сгенерирует Google Fonts во вкладке Embed.

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

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

Его нужно подобрать максимально похожим на основной шрифт.

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

Если выбираете этот способ, стоит обратить внимание на оптимизацию

Clear Sans

200 normal — ClearSans-Thin

The quick brown fox jumps over the lazy dog.
300 normal — ClearSans-Light

The quick brown fox jumps over the lazy dog.
normal normal — ClearSans

The quick brown fox jumps over the lazy dog.
500 normal — ClearSans-Medium

The quick brown fox jumps over the lazy dog.
bold normal — ClearSans-Bold

The quick brown fox jumps over the lazy dog.
normal italic — ClearSans-Italic

The quick brown fox jumps over the lazy dog.
500 italic — ClearSans-MediumItalic

The quick brown fox jumps over the lazy dog.
bold italic — ClearSans-BoldItalic

The quick brown fox jumps over the lazy dog.

Зарегистрируйтесь и собирайте свою коллекцию шрифтов.

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

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

Скачать веб-шрифт

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

Контрастные сочетания

Строятся на шрифтах с максимальным количеством контраста и минимальным количеством сходства 0-3. Объединяются по общему настроению, аксессуарам, художественному стилю. Контрастные сочетания самые сложные, но и самые эффектные.

Нет сходства

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

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

Сходство аксессуаров

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

Сходство художественного стиля

Это наиболее распространённое из контрастных сочетаний. Некоторые стили имеют свои характерные шрифты и шрифтовые сочетания. Художественные стили тесно связаны с историческими периодами, а форма шрифтов с инструментами и материалами, при помощи которых они были созданы.

Шрифты с засечками и без

Как вы обратили внимание, всего три типа шрифтов. И если не брать во внимание моноширинный Courier New, то нами приходится иметь дело с двумя семействами — это шрифты с засечками serif (serif — «засечка») и шрифты без засечек sans-serif (sans — «без»)

Следующий рисунок наглядно все демонстрирует.

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

Антиквы

Brygada 1918. Бесплатная антиква с кириллицей в шести начертаниях (три прямых и три италика). Презентация на Behance.

Wremena. Бесплатная антиква в трёх начертаниях с кириллицей, сделанная Романом Горницким.

Времена — это новая версия шрифта 2009 года, таймсообразной антиквы с острыми треугольными засечками.

Blacker Pro. Антиква с высокой контрастностью и агрессивными засечками. 5 из 69 начертаний можно использовать бесплатно, стоимость остальных — от 29 $, от 284 $ за все.

Lovelace. Антиквенная гарнитура с кириллицей. Всего 30 начертаний, Два начертания дарят бесплатно. Остальные от 29 $, все вместе от 189 $.

Racing Sans One

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

Racing Sans One – шрифт 1 стиля, очень динамичный и контрастный, был придуман за 100 лет до появления Helvetica. Винтажный шрифт смотрится мощно, вызывающе, словно приглашает в соперничество, конкурентную борьбу. С ним хорошо смотрятся логотипы в нишах, которые исповедуют дух соперничества, – что-то спортивное, дорогое или давно себя зарекомендовавшее, узнаваемое многими. Пейнтбольный клуб, ралли, оружейное производство, тотализатор любого рода – примеры ниш, в которых лого с этим шрифтом будет выглядеть удачно. Кириллица отсутствует.

Сервисы встраивания веб-шрифтов

Google Web Fonts (GWF) или Typekit — это сервисы которые позволяют использовать шрифты, размещенные на их серверах. GWF бесплатен, не требует наличия учетной записи и не ограничивает трафик или домены. Typekit же устанавливает стоимость услуги в зависимости от количества доменов, на которых используется шрифт, или от ежемесячного трафика сайта. Одной из наиболее ценных характеристик GWF является возможность загрузки версии шрифтов для стационарных компьютеров для использования на этапе разработки проекта.

Реализация

Это действительно быстро и просто:

1. Выберите шрифт. Вы можете добавить его в свою коллекцию или использовать “quick-use” для генерации кода и опций для этого шрифта.

2. Скопируйте и вставьте сгенерированный код в <Head>

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. Шрифт теперь доступен в вашем коде CSS

   body { font-family: 'Tangerine', serif; font-size: 48px; }

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

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

Идем на сайт 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/

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

Oswald

• Дата создания: 2011 год
• Всего стилей: 6 шт.
• Используют: 5.1 млн. сайтов

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

Шрифт без засечек

GORGEOUS

Дизайнер Rajesh Rajput создал этот современный, элегантный шрифт с колоссальными 20ю различными начертаниями и несколькими языковыми версиями. Идеально подходит для модных и стильных проектов, великолепно смотрится в больших титрах и переплетается с фоновыми элементами.

LUXIA

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

SIMPLIFICA

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

COCO

Дизайнер Хендрик Роландес создал Coco с мыслью о профессионале моды. Тонкие вытянутые буквы со специальной прозрачностью по краям создают прекрасные заголовки и короткие текстовые фрагменты. Коко прекрасно работает!

STEINER

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

COCOMAT

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

CLEARLIGHT

Clearlight — это шрифт, который органично сочетает элегантность с индустриализмом. Дизайнеры из Nima Visual разработали Clearlight для использования в качестве заголовков, субтитров и коротких абзацев. Это отлично подойдет для модной робототехнической компании или высококлассного бренда технологических услуг.

DINER

Diner — еще один шрифт, вдохновленный ар-деко. Это очень длинный и тонкий шрифт, который представлен только в верхнем регистре, но имеет четыре совершенно разных веса. Разработанный Дэвидом Раковски, Diner идеально подходит для заголовков и логотипов и будет отлично смотреться в сочетании с закругленным шрифтом каллиграфии.

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

CASUAL

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

PRESTAGE

Prestage — еще один великолепный шрифт от Craft Supply — высокий элегантный шрифт с твердыми и контурными вариациями. Этот шрифт отлично подходит для печати или Интернета и идеально подходит для творческой индустрии. Он отлично смотрится как в заголовках, так и в тексте, желательно для коротких, кратких абзацев. Prestage — отличный выбор для элегантной упаковки, обложек журналов, блогов и даже логотипов.

AUDREY

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

Top recommended Google Web Fonts

Here you can find a selection of fonts that we have chosen due to their aesthetic aspect, but above all functionality, containing families with many styles and weights.
We have highlighted fonts that are optimized for interfaces, , and others that are , or particularly comfortable for reading on mobile and legible on any device — be it smartphone, desktop or tablet.

• Alegreya

• B612

• Muli

• Titillium Web

• Varela

• Vollkorn

• IBM Plex

• Crimson Text

• Cairo

• BioRhyme

• Karla

• Lora

• Frank Ruhl Libre

• Playfair Display

• Archivo

• Spectral

• Fjalla One

• Roboto

• Montserrat

• Rubik

• Source Sans

• Cardo

• Cormorant

• Work Sans

• Rakkas

• Concert One

• Yatra One

• Arvo

• Lato

• Abril FatFace

• Ubuntu

• PT Serif

• Old Standard TT

• Oswald

How to use Web Fonts

At this point everyone knows how to use web fonts, but if you’re not sure, you only need to know that there are two ways. The first is to use web fonts services like Google Fonts, Webtype, Fonts.com or Typekit and download the font from their servers, as you’ll see in the following example:

The second is to host the font in your server and use @font-face rule in your stylesheet as you can see here:

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. GWF is free to use, does not require you to have an account, and has no limit on traffic or domains unlike Typekit. Typekit sets the cost of the service according to the number of domains in which the font is used, or the site’s monthly traffic. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.

Implementation

It really is quick and simple:

1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.

2. Copy and paste the code generated into your <Head>

   <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>

3. The font is now accessible in your CSS code

   body { font-family: 'Tangerine', serif; font-size: 48px; }

Here you can consult an extended manual for styles, script subsets, and using multiple fonts.

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browsers and comes in formats such as TTF, WOFF, EOT and SVG.

   @font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }

Читабельность шрифта

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

Всегда обращайте на это внимание

Что можно сделать? Во-первых, использовать фото, подходящее для фона: с крупными, однородными элементами. Во-вторых, приглушить фотографию с помощью фильтра, она станет ровнее и текст будет читаться лучше. В-третьих, можно у конкретного блока увеличить насыщенность, применяя «инлайновый стиль». Это значит, что вы задаете настройки не для всего сайта, а только для части текста. Нужно выделить текст и задать параметры через редактор.

Стиль, который применятся таким образом, поверх глобальных настроек, всегда будет приоритетным. Поэтому, если вдруг вы меняете параметры в настройках сайта, а изменения не видны, значит в этом месте применен «инлайновый стиль». Чтобы его убрать, нужно выделить текст и нажать иконку «очистить».

Пример 1: Текст читается не очень

 Пример 2: Текст читается хорошо

Акцидентные

Le Murmure Cyrillic. Александр Слобженинов выпустил кириллизацию бесплатного акцидентного кириллического шрифта.

Monterchi. Гарнитура, включающая четыре подсемейства: Monterchi, Text, Sans, Serif. Все шрифты с кириллицей и богатым набором лигатур. Всего 50 начертаний, 8 из которых бесплатные. Цена на остальные от 29 $ за начертание, от 229 $ за все.

Handjet. Бесплатная декоративная гарнитура с кириллицей студии Rosetta. У шрифта 22 варианта рисунка, каждый вариант в 9 начертаниях. Всего получается 198 шрифтов. Плюс один вариативный, в который упакованы все. Немало опентайп фич.

Concrete. Бесплатный гротеск с кириллицей в одном начертании. Подойдёт для акциденции.

SK Primo. Бесплатный акцидентный гротеск с кириллицей, созданный Тихоном Резцовым из Москвы.

Palace of Sports. Акцидентный гуманистический гротеск с кириллицей, вдохновлённый шрифтом с фасада петербургского спортивного комплекса «Юбилейный» (нет, в разрушено другое здание — СКК). Бесплатен для некоммерческих проектов.

Postertoaster. Бесплатный акцидентный моноширинный шрифт с кириллицей. У каждого глифа несколько альтернатив. Сделал Всеволод Абрамов из Москвы.

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

Обновился Marvin Visions, акцидентный шрифт с кириллицей — теперь он вариативный в двух вариантах оптического веса. Шрифт бесплатный для личного использования, коммерческая лицензия стоит от 19 £ за начертание и от 38 £ за набор начертаний (есть три опции).

BROZAS. Бесплатный вариативный акцидентный шрифт с кириллицей. Сделал Виктор Песоцкий из Санкт-Петербурга.

FE Fire Font. Бесплатный акцидентный шрифт с кириллицей в одном начертании. Все формы вдохновлены языками пламени.

SWAMPY. Бесплатный акцидентный «болотный» шрифт с кириллицей.

Помидорко. Бесплатный акцидентный шрифт с русским и украинским языками. Одно начертание.

Выводы и рекомендации

Google Fonts – лучший типографический каталог дизайнерских шрифтов в мире, в библиотеке которого содержится более 960 семейств самых разных веб-шрифтов. Искать шрифты для сайта, созданного на CMS или конструкторе, стоит именно здесь: поисковый гигант предоставляет возможность легально и бесплатно использовать сотни вариантов шрифтов, позволяет их скачивать и даёт инструкции по установке на сайты.

Разборчивость текста и привлекательность шрифтов ощутимо влияют на поведение посетителей сайта. Мы включили в рейтинг 10 популярных шрифтов, любой из которых можно использовать бесплатно на своём сайте, работающем на любом движке или сайтбилдере. Загрузить на ПК шрифт из Google Fonts можно очень просто и всего за пару минут. После установки на Windows или MacOS шрифт будет доступен во всех приложениях, поддерживающих их выбор – Word, Photoshop, браузерах и т. д.

Подводим итоги по выбору шрифтов для логотипов.

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

Если вы пытаетесь выбрать шрифт, обратитесь к этой статье, чтобы подумать об историческом контексте и эстетической значимости

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

Надеемся, что вам понравилась данная статья и она оказалась интересной.

А если вам нужно разработать собственный логотип, вы можете сделать это в нашем сервисе логотип онлайн!