Подключить шрифт

1-ый вариант (рекомендуемый)

Начиная с CSS 3 стало возможным добавлять нестандартные шрифты через ключевое слово @font-face.

@font-face {
    font-family: 'FontName';
    src: local('FontName'), url('font.ttf'); /* путь к шрифту */
}

/* применить подключенный шрифт */
p {
    font-family: 'FontName';
}

Стоит обратить внимание на свойство src. Параметр local() пытается подключить шрифт с компьютера посетителя сайта, иначе он загружает и отображает шрифт из параметра url().

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

/* стандартный стиль шрифта */
@font-face {
    font-family: 'FontName';
    src: url('font.ttf');
}

/* для выделения жирным */
@font-face {
    font-family: 'FontName';
    font-weight: 700;
    src: url('fontBOLD.ttf');
}

/* для выделения курсивом */
@font-face {
    font-family: 'FontName';
    font-style: italic;
    font-weight: 400;
    src: url('fontITALIC.ttf');
}

В коде выше загрузятся три разных шрифта (или один шрифт с тремя разными стилями).

Здесь стоит обратить внимание, что имена шрифтов везде одинаковы (свойство font-family). Чтобы подключить шрифт с нужным стилем, надо добавить дополнительный параметр, который указан в определении шрифта.

/* задать стандартный шрифт */
body {
    font-family: 'FontName';
}

/* подключить шрифт с жирным выделением */
strong {
    font-weight: 700;
}

/* подключить шрифт с курсивным выделением */
em {
    font-style: italic;
    font-weight: 400;
}

2-ой способ

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

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

/* Подключение шрифтов */
@font-face {
    font-family: 'FontName';
    src: url('font.ttf');
}

@font-face {
    font-family: 'FontNameBold';
    src: url('fontBOLD.ttf');
}

@font-face {
    font-family: 'FontNameItalic';
    src: url('fontITALIC.ttf');
}

/* Применение шрифтов */
body   { font-family: 'FontName' }
strong { font-family: 'FontNameBold' }
em     { font-family: 'FontNameItalic' }

Данный вариант неудобен тем, что надо будет запоминать названия нескольких шрифтов, вместо того, чтобы использовать стандартное CSS-свойство, например, font-weight.