Подключение нестандартных шрифтов в Linux

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

Для подключения нестандартных шрифтов:

Установите шрифты на сервер.
Подключите шрифты в веб-приложение:

После выполнения действий заданные нестандартные шрифты будут подключены в веб-приложение.

Использование безопасных шрифтов

Безопасные шрифты – это коллекция шрифтов, в которой содержатся часто используемые шрифты для корректного отображения в браузере. Набор безопасных шрифтов пересекается на операционных системах Windows, Mac, Linux.

Наиболее популярный набор безопасных шрифтов: Arial, Helvetica, Times New Roman, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Trebuchet MS, Arial Black, Impact.

Для использования безопасных шрифтов добавьте свойство font-family в CSS-файле и пропишите шрифты из коллекции:

p{
    font-family: "Times New Roman", Georgia, serif;
}

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

В данном случае выполняется последовательная проверка заданных шрифтов. Если ни один из шрифтов не найден, то в браузере будет использоваться другой доступный шрифт без засечек.

Подключение шрифта из сети Интернет

Для подключения шрифта из сети Интернет:

Перейдите на официальный сайт сервиса с коллекцией шрифтов.
Выберите необходимый шрифт из коллекции и получите ссылку на шрифт с помощью инструкции сервиса.

Примечание. При выборе шрифта учитывайте количество начертаний. Количество начертаний шрифта увеличивает размер файла и влияет на скорость загрузки веб-приложения.

Скопируйте ссылку на шрифт и вставьте одним из способов:

на отдельной странице веб-приложения в теге <head>:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

в CSS-файле с помощью конструкции @import перед таблицей стилей:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

в CSS-файле с помощью конструкции @font-face:

@font-face{
    font-family: Graublau Sans Web, Lucida Grande, sans-serif; /* название шрифта */
    src: url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); /* абсолютный путь к шрифту */
    font-weight: normal; /* варианты начертания */
    font-style: normal;
}

После выполнения действий выбранный шрифт будет подключён и доступен для использования при наличии соединения к сети Интернет.

Подключение шрифта из файла на сервере

Для подключения шрифта из файла на сервере:

Скопируйте шрифт на сервер.
Добавьте шрифт в CSS-файле с помощью конструкции @font-face:

@font-face{
    font-family: Graublau Sans Web, Lucida Grande, sans-serif; /* название шрифта */
    src: url('../fonts/WebFont.ttf') format('truetype'); /* относительный путь CSS-файла к шрифту с расширением *.ttf */
    font-weight: normal; /* варианты начертания */
    font-style: normal;
}

Примечание. Каждое начертание шрифта прописывается отдельно.

В CSS-файле возможно добавление шрифтов с разными расширениями для кроссбраузерности. Доступные расширения: *.ttf, *.otf, *.eot, *.woff, *.svg.

После выполнения действий будет подключён шрифт из файла на сервере.

См. также:

Вопросы и ответы