Безопасные шрифты

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

​Список безопасных шрифтов:

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

*Шрифт "Century Gothic" содержится на 83% устройств, этот процент растет и в скором будущем он станет безопасным.
Увеличить количество доступных шрифтом можно за счет подключаемых шрифтов от Google Fonts, кириллические шрифты можно скачать тут. Привила сочетания шрифтов и примеры сочетаний можно посмотреть тут: Таблица сочетания шрифтов.

Шрифты - иконки

1. http://fontawesome.io - Font Awesome
2. http://zurb.com/playground/foundation-icon-fonts-3  - Foundation icon
3. http://ionicons.com - ionicons
4. http://design.google.com/icons/ - Material Design Icons
5. http://octicons.github.com - Octicons
6. http://www.typicons.com - Typicons

Сервис для выбора иконок: http://glyphsearch.com

Web инструменты для работы со шрифтами:

Подбор шрифтов:

1. http://fontstorage.com/ - База шрифтов с возможностью подбора и вывод в CSS
2. http://www.typetester.org/ - Тестирование и подбор шрифтов, вывод в CSS.
3. http://csstypeset.com/ - Работа с разными стилями и атрибутами текста и вывод в CSS.
4. http://www.designerplaything.co.uk/designer-plaything.html - Подбор шрифта и цвета.
5. http://www.texster.ru/ - Помощник в выборе шрифта.
6. http://flippingtypical.com/ - Просмотр вашего текста в разном стиле.
7. http://www.stcassociates.com/lab/fontbrowser.html - Аналогичен предыдущему (более расширен).
8. http://www.blindtextgenerator.com/ru - Русский онлайн Lorem Ipsum генератор.
9. http://wordmark.it/ - Просмотр вашего текста в разных стилях.

Распознавание шрифтов:

1. http://www.myfonts.com/WhatTheFont/ - Определение шрифта по образцу.
2. https://www.fontspring.com/matcherator - Определение шрифта по образцу.
3. http://www.identifont.com/identify.html - Выявляет шрифт через ряд вопросов о нем.
4. http://www.typophile.com/ - Крупнейшее сообщество на тему шрифтов.
5. http://www.bowfinprintworks.com/ - поиск шрифтов по образцам.
6. http://www.fontshop.com/research/ - выясняет название по форме отдельных символов.
7. http://www.flickr.com/groups/typeid/ - определяет названия шрифтов, используемых в различных изображениях.
8. http://fount.artequalswork.com/ - бесплатный онлайн сервис для моментальной идентификации шрифта.

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

1. http://www.xfont.ru/ - Крупнейший сервис по шрифтам.
2. http://www.fontov.net/ - бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
3. http://ifont.ru/ - Большой русскоязычный сервис шрифтов.
4. http://www.dafont.com/ - шрифты с просмотром вашего примера.
5. http://www.fonts-online.ru/ - База шрифтов с просмотром Online

Прочее:

1. http://fontstruct.com/ - создание собственных шрифтов Online
2. http://fontark.net/farkwp/ - Конструктор шрифтов Online
3. http://www.fontsquirrel.com/fontface/generator - загрузка и доработка ваших шрифтов.
4. http://pxtoem.com/ - Переводит одни единицы измерения шрифтов в другие.
5. http://csswarp.eleqtriq.com/ - Онлайн сервис для подготовки эффектного текста.
6. http://www.bestwebfonts.com/ - Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.