Webfonts.pro — здесь собраны лучшие шрифты

Мы нашли видео с рассуждениями о том, можно ли действительно стать умнее от чтения?

Краткое повторение семейств шрифтов

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

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

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

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

Как сделать визитку в Word

Веб-шрифты

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

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

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

Поддержка форматов

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

Формат файла шрифта	Какие браузеры поддерживают
TTF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT	Поддерживает только Internet Explorer
WOFF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG	Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

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

Подключаем веб-шрифт с помощью @font-face

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

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

@font-face {
	font-family: MyUniqueFont;
	src: url('fonts/MyUniqueFont.ttf');
}

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

p {
	font-family: MyUniqueFont;
}

Во второй строке указывается путь к файлу шрифта. В нашем примере файл находится в папке . У вас URL-адрес может отличаться.

Веб-шрифты

Но есть альтернатива, которая работает очень хорошо начиная с 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. Пара бесплатных шрифтов с латиницей: гротеск и скрипт. Повторяется в разделе с рукописными шрифтами.

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

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

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

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

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 как элегантную альтернативу без засечек для названий и типографских композиций. Шрифт доступен в трех вариациях, жырный, регулярный или наклонный. Варианты внутри шрифта предоставляют множество возможностей для любого элегантного проекта в Интернете и печати.

Sriracha

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

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

Заметки

Browser Support

Every web browser has varying levels of support for fonts linked via . Web Font Loader determines support for web fonts is using the browser’s user agent string. The user agent string may claim to support a web font format when it in fact does not. This is especially noticeable on mobile browsers with a «Desktop» mode, which usually identify as Chrome on Linux. In this case a web font provider may decide to send WOFF fonts to the device because the real desktop Chrome supports it, while the mobile browser does not. The Web Font Loader is not designed to handle these cases and it defaults to believing what’s in the user agent string. Web font providers can build on top of the basic Web Font Loader functionality to handle these special cases individually.

If Web Font Loader determines that the current browser does not support , the event will be triggered.

When loading fonts from multiple providers, each provider may or may not support a given browser. If Web Font Loader determines that the current browser can support , and at least one provider is able to serve fonts, the fonts from that provider will be loaded. When finished, the event will be triggered.

For fonts loaded from supported providers, the event will be triggered. For fonts loaded from a provider that does not support the current browser, the event will be triggered.

For example:

WebFontConfig = {
  providerA: 'Family1',
  providerB: 'Family2'
};

If can serve fonts to a browser, but cannot, The event will be triggered for . The event will be triggered for once it loads, as will the event.

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

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

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

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

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

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

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; }

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 Best Web Safe Fonts that Work with HTML & CSS

This web
safe font list includes the most popular fonts and the best widely used
typography fonts. While some are free, please purchase genuine
authorized fonts.

1. Arial

The
Arial font is one of the most widely used designs in the last 30 years.
Designed by Monotype Imaging designers Robin Nicholas and Patricia
Saunders in 1982 for use with early IBM laser printers. Since Arial is
easy to read in both large and small sizes and in a variety of
applications, Arial has been the main screen font for decades.

Use for: advertising, book design, office communications, posters, large print ads

2. Calibri

The
release of Calibri by Microsoft and its implementation as the default
font in many applications is widely recognized. It is a humanistic sans
serif font known for its warm and rounded lines. Calibri’s compact
layout gives it the flexibility to work in a wide range of text sizes.

Use for: digital media

3. Times NewRoman

One
of the most common font types is Times New Roman. This serif font comes
from the British «Times». In 1929, font expert Stanley Morison
criticized the magazine’s fonts as difficult to read and ugly. The
magazine’s people accepted his criticism and asked him to design a new
font suitable for magazine reading. So, Morison collaborated with Victor
Lardent from the magazine to design the now famous Times New Roman.

Use for: books, periodicals, annual reports, brochures, newspapers

4. Helvetica

Helvetica
is one of the most widely used sans serif fonts, created in 1957 by Max
Miedinger and Eduard Hoffman. The neutral design of this font makes it
quite usable in a variety of applications. Due to its usability,
Helvetica is ubiquitous and has always been a popular choice for
corporate identity. In addition, Helvetica is widely used by the US
government, and the Helvetica font is used on the US tax bill.

Use for: brand trademark

5. Tahom

Tahoma
is a very common sans serif font. The font structure is similar to
Verdana, its character spacing is small, and its support for Unicode
word sets is large. It was launched by Microsoft in 1999. Many people
who don’t like the Arial font often use Tahoma instead. Specifically,
Arial is criticized for certain style issues, such as uppercase «I» and
lowercase «l» being difficult to distinguish

Use for: screen dialogs, menus

6. Georgia

Georgia
is a serif font, designed by the famous font designer Matthew Carter
for Microsoft in 1993. One of its strengths is good readability even in
small font size.

Use for: e-book, mobile phone, computer webpage

7. Verdana

Verdana
is a sans serif font designed by Matthew Carter for Microsoft. Like the
font Frutiger, the Verdana design concept is adapted to the
low-resolution computer screens of that time. The breadth and width of
Verdana characters are key to the legibility of this font on the screen.
Although the Verdana font family is small in size, it has a higher
resolution and as such is one of the most popular fonts.

In 2010,
IKEA abandoned Futura, which had been in use for many years, and turned
to Verdana. According to IKEA, the reason for this change was to ensure
that the font could be adapted to texts of various countries (previous
IKEA fonts were not compatible with Asian characters), thus ensuring the
consistency of the IKEA design. Thus, Verdana has a wide international
appeal and usability.

Use for: e-book, mobile phone, computer webpage

8. Optima

The
Optima font is a clear and precise font designed by the famous designer
Hermann Zapf. Optima is inspired by classical Roman inscriptions, with
slightly different curves and lines, leaving an elegant and clear
impression. Therefore, Optima is often used to convey classic ideals, as
well as current trends. For example, Estée Lauder uses it as an
official typeface design.

Use for: poster design, bookbinding, album cover, product packaging design

9. Palatino

The
Palatino font series is said to be one of the ten most used fonts in
the world. Palatino’s design uses classic serif fonts in a strong, open
style that is easy to read and very attractive. Its popularity has
spawned many imitators.

Use for: newspapers and magazines, advertising, e-books, mobile apps, computer pages

10. Candara

Candara is a sans serif font developed byFont Designer Gary Munch for Microsoft and shipped with Windows Vista. ——Wikipedia

Как сравнить два документа Word на различия текста?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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