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

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

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

  1. Установите шрифты на сервер.

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

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

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

Безопасные шрифты – это коллекция шрифтов, в которой содержатся часто используемые шрифты для корректного отображения в браузере. Набор безопасных шрифтов пересекается на операционных системах 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;
}

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

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

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

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

  1. Перейдите на официальный сайт сервиса с коллекцией шрифтов.

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

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

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

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

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

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

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

  1. Скопируйте шрифт на сервер.

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

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

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

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

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

См. также:

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