Как использовать не стандартные шрифты в html?

Question

[Friend]

У меня есть ряд шрифтов которых не в стандарте и я их подключаю отдельно.

@font-face {
    font-family: Ubuntu_Bold; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-B.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Bold_Italic; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-BI_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Condensed; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-C_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Light; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-L_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Light_Italic; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-LI_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Medium; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-M_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Medium_Italic; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-MI_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_R; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-R_0.ttf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Ubuntu_Italic; /* Гарнитура шрифта */
    src: url(Ubuntu/Ubuntu-RI_0.ttf); /* Путь к файлу со шрифтом */
   }

Дело в том что эти шрифты тянут 1.5 МБ примерно с загрузки сайта и это очень много.
Можно ли как то установить их так что бы они автоматом подключали как стандартные и не тянули столько места?

P.S. установил их в Windows , фотошоп видит, а html css нет

Answer 1

[Serj-One]

Вы же понимаете, что для отображения шрифта нужен файл шрифта? И если у пользователя его нет, его нужно загружать.
Да, загрузка обязательна. Можно подгружать оптимизированные шрифты с поддержкой только нужных языков из Google Fonts, или обрезать шрифт самостоятельно Белкой

Comments

[Friend]

Google Fonts попробовал подключить

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet">

но шрифт не получается выставить
font: 20pt 'Ubuntu Medium', sans-serif;
почему может быть такое?

[Serj-One]

Иван:
Там же указано, как использовать.
font-family: 'Ubuntu', sans-serif;
Medium - это насыщенность 500, указывать в имени шрифта не нужно, это делает св-во font-weight: 500;

Answer 2

[qwertybnm]

Предложите пользователю скачать шрифты :D

Answer 3

[Евгений Вольф]

Можно ли как то установить их так что бы они автоматом подключали как стандартные и не тянули столько места?

Можно, но если у пользователя этих шрифтов нет - браузер будет перебирать шрифты в той последовательности, в которых Вы их указали. Обычно указывают несколько шрифтов одного семейства, для таких случаев. И, насколько я помню, браузер не будет скачивать шрифты, если они уже есть в системе, по крайней мере популярные браузеры не должны таким страдать. Внимательно смотрите на названия (про них написано ниже).

P.S. установил их в Windows , фотошоп видит, а html css нет

Значит, Вы не правильно указали имя шрифта в CSS. Обратите внимание на то, как шрифт называется в самом файле шрифта, при его установке и как он же называется в фотошопе (или в Word'e или в LibreOffice'е или в другой программе, где можно смотреть/выбирать/использовать разные шрифты). А потом сравните это с названием у Вас в CSS, наверняка они будут отличаться...

Да, и у Вас в примере шрифты только в TTF-формате. Не все браузеры его понимают, для максимальной совместимости шрифты обычно конвертируют в несколько дополнительных форматов, например с WOFF(2) и SVG.

Answer 4

[Ankhena]

Придется принять решение либо грузить пользователю пару лишних мегабайт либо сменить шрифт.

И для веба их еще придется конвертировать в разные форматы для разных браузеров.
https://web-font-generator.com/

P.S. установил их в Windows , фотошоп видит, а html css нет

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