Предположим вы решили на свой сайт добавить нестандартный шрифт. При этом важно помнить о том, что шрифт должен быть кроссбраузерным, т.е. пониматья всеми браузерами.
Решить эти задачи поможет сервис для конвертации шрифтов Web Font Generator.
Если вы уже нашли подходящий шрифт, то можно приступить к его установке.
Переходим на сайт по ссылке https://www.web-font-generator.com/
Загружаем через форму на сайте файл со шрифтом. Поддерживаются шрифты формата TTF и OTF.
Принимаем предлагаемое соглашение, поставив галочку и жмем "Generate web font".
Видим сообщение о том, что шрифт конвертирован. Нажимаем кнопку "Download Package", чтобы скачать архив.
В архиве будут находится файлы: 4 конвертированных шрифта, файл таблицы стилей CSS и HTML-страничка с примером изображения шрифта.
Копируем файлы шрифтов в папку на сайте, а из файла CSS копируем содержимое и вставляем в таблицу стилей прикрепленную к нашему сайту.
@font-face {
font-family: 'electron8f';
src: url('electron8f.eot?#iefix') format('embedded-opentype'), url('electron8f.woff') format('woff'), url('electron8f.ttf') format('truetype'), url('electron8f.svg#electron8f') format('svg');
font-weight: normal;
font-style: normal;
}
Если файлы шрифтов и таблицы стилей лежат не в одной папке на сайте, то нужно поменять путь к файлам шрифтов в параметре src.
Например, файлы со шрифтами лежат в папке fonts. Тогда значения параметра src будут такие:
src: url('fonts/electron8f.eot?#iefix') format('embedded-opentype'), url('fonts/electron8f.woff') format('woff'), url('fonts/electron8f.ttf') format('truetype'), url('fonts/electron8f.svg#electron8f') format('svg');