Шрифт CSS

font-family: указывает шрифт применяемый к элементу. Работает только если у посетителей сайта есть такой же шрифт или можно загружать дополнительный шрифт с самого сайта.

Шрифты установленные на операционных системах

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

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

"Times New Roman", Times, serif, Georgia, "Hoefler Text", Garamond

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

Arial, Helvetica, Verdana

Моноширинные шрифты

Шрифты с символами одинаковой ширины.
Courier, "Lucida Console", Monaco

Веб-шрифты

Загружаются с веб-сервера на устройство пользователя.

Основные сайты для загрузки шрифтов:

fonts.google.com
exljbris.com
theleagueofmoveabletype.com
fontex.org
openfontlibrary.org
fontsquirrel.com

Сайт для преобразования формата .ttf в другие популярный форматы:
https://www.fontsquirrel.com/tools/webfont-generator
woff2 более сжатый формат, лучше преобразовывать его с опцией basic, с optimal размер файла шрифта меньше, но шрифт может не загружаться в некоторых элементах html.

Шрифты загружаются при помощи директивы @font-face:

@font-face{
    font-family: "name2001";
    src:url('Caveat-Regular.ttf');
}

font-family: задает любое произвольное имя шрифта.
src:url указывает путь к шрифту.

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

p{font-family: "name2001";}

Пример веб-шрифта