Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Свой шрифт на странице

Можно использовать на сайте свой шрифт, даже если его нет на компьютере пользователя.

CSS подгружает на страницу файлы со шрифтами, которые находятся на вашем сервере, с помощью @font-face.

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

К сожалению, пока нет единого формата, поддерживаемого всеми браузерами, поэтому подключаем три формата:

TTF	формат для старых браузеров (в том числе мобильных)
WOFF	формат для современных браузеров, который сжимает шрифты формата TTF
WOFF2	обновленный формат WOFF, обеспечивающий улучшенное сжатие

Пример

@font-face {
font-family: 'Montserrat';
src: local('Montserrat Regular'),
url('/fonts/Montserrat-Regular.woff2') format('woff2'),
url('/fonts/Montserrat-Regular.woff') format('woff'),
url('/fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: local('Montserrat Bold'),
url('/fonts/Montserrat-Bold.woff2') format('woff2'),
url('/fonts/Montserrat-Bold.woff') format('woff'),
url('/fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: local('Montserrat Italic'),
url('/fonts/Montserrat-Italic.woff2') format('woff2'),
url('/fonts/Montserrat-Italic.woff') format('woff'),
url('/fonts/Montserrat-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Montserrat';
src: local('Montserrat Bold Italic'),
url('/fonts/Montserrat-BoldItalic.woff2') format('woff2'),
url('/fonts/Montserrat-BoldItalic.woff') format('woff'),
url('/fonts/Montserrat-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
body {
font-family: 'Montserrat', sans-serif;
color: #333;
}

.
Прокомментировать/Отблагодарить