Шрифты

Общая информация по шрифтам

Каталог шрифтов: https://nomail.com.ua/

Google Fonts: https://fonts.google.com/

Конвертер шрифтов: http://www.font2web.com/

font-family: "Имя шрифта", "Имя шрифта", тип шрифта

Устанавливает семейство шрифта

Типы шрифта: serif — шрифты с засечками (антиквенные), типа Times;

sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;

cursive — курсивные шрифты;

fantasy — декоративные шрифты;

monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

font-weight: Устанавливает насыщенность шрифта. 100 - thin 200 - UltraLite 300 - lite 400 - normal 500 - medium 600 - semibold 700 - bold 800 - Heavy 900 - black

Можно использовать два подхода: Подключать системные шрифты. 1.1. Сделать следующую запись: / Define the "system" font family / @font-face { font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); }

/ Now, let's apply it on an element / body { font-family: "system"; }

1.2. Использовать готовый модуль, который сам определяет системный шрифт и использует его. https://github.com/jonathantneal/system-font-css.

1.3. Подобрать похожий шрифт через: https://meowni.ca/font-style-matcher/

Подключение собственных шрифтов и загрузка их через Font Face Observer (https://fontfaceobserver.com/)

Для этого подключаю fontfaceobserver.standalone.js. В script.js загружаю их по алгоритму, в head проверяю наличие в кэше.