CSS для загрузки собственного, пользовательского, нового шрифта с сайта в браузер - загрузка с сервера файлов .otf .oet, IE

Пример .СSS - как загрузить шрифт с сервера

Пусть у нас имеются два файла: HeliosCond-Bold.eot и HeliosCond-Bold.otf (от том как получить .eot из .otf читайте ниже) и пусть они лежат в корне сайта в директории /fontlocation/, тогда загрузить их в браузер можно будет таким образом (протестировано в IE 11, Chrome и Mozilla Firefox):

/*пример CSS для загрузки шрифта*/
@font-face {
  font-family: FontFamilyName; /* название заргужаемого шрифта */
  src:  
    local('HeliosCond-Bold'), /*вдруг шрифт уже есть на машине клиента,
	 а если нет то будем грузить с сервера:*/
    url('/fontlocation/HeliosCond-Bold.eot'), /*для IE без указания формата - будет использовать oet*/
    url('/fontlocation/HeliosCond-Bold.otf') format("truetype"); /* для остальных браузеров*/
}

/* Пример использования, 
укажем название описанного выше шрифта первым в списке
(или вообще единственным)*/
h1 {
    font-family: FontFamilyName;
} /*окружите текстируемый текст в HTML файле
тэгами <h1> </h1>*/

Как получить .eot из .otf

Используйте онлайн-конвертеры:

• Этот: http://www.font2web.com/
• Или этот: https://everythingfonts.com/otf-to-eot (тут не забываем выбрать Yes)