Добавяне на допълнителен шрифт в сайт със CSS

Сега ще разберете как да си добавите допълнителни шрифтове във вашият сайт, както и да се зареждат правилно на всички по-известни браузъри.

Шрифт се добавя със CSS (@font-face). @font-face се поддържа от Internet Explorer, Firefox, Opera, Chrome и Safari. Сега ще ви покажа примерен код по който ще работим:

@font-face {
    font-family: 'OpenSans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff2') format('woff2'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Има различни типове формати. Едни от най-използваните са: ttf, woff, woff2, eot и svg. Различните браузъри поддържат различни формати. Следващата таблица показва кой формат от кои браузъри се поддържа:

*Деактивирано по подразбиране. Може да се активира.

Следва да видим, какви свойства има @font-face:

Това е общата информация за @font-face. Един от най-известните @font-face генератори е fontsquirrel. С няколко клика може да конвертирате шрифт във всичките основни формати, както и да получите CSS с @font-face и демо.