Connecting Non-Standard Fonts in Linux

On building reports in user web application for data visualizers the Liberation Sans standard font or another predefined default font is used. If no font is found, then safe or non-standard fonts.

To connect non-standard fonts:

Install fonts to the server.
Connect fonts in the web application:

After the executing the operations, the defined non-standard fonts are connected in the web application.

Using Safe Fonts

Safe fonts is a set of commonly used fonts to ensure maximum compatibility between browsers. The set of safe fonts is the same for Windows, Mac, Linux OS.

The most widely used fonts: Arial, Helvetica, Times New Roman, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Trebuchet MS, Arial Black, Impact.

To use safe fonts, add the font-family property to the CSS file and write fonts from the collection:

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

NOTE. Determine font name in brackets, if it contains spaces.

The consecutive verification is applied for defined fonts. If no font is found, the browser will apply any other available sans-serif font.

Connecting Font from Internet

To connect a font from Internet:

Go to the official site of font collection service.
Select the required font from the collection and get the font link following the service guide.

NOTE. On selecting the font, consider the number of font styles. The number of font styles increases the file size and impacts the web application loading speed.

Copy the font link and paste, using one way to do it:

In the <head> tag on a web application page:

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

Using @import before styles table in the CSS file:

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

Using @font-face in the CSS file:

@font-face{
    font-family: Graublau Sans Web, Lucida Grande, sans-serif; /* font name */
    src: url('https://fonts.googleapis.com/css?family=Roboto&display=swap'), /* absolute font path */
    font-weight: normal; /* font style option */
    font-style: normal;
}

After executing the operations, the selected font will be connected and available for use if there is Internet connection.

Connecting Font from File on the Server

To connect font from file on the server:

Copy font to the server.
Add a font to the CSS file using @font-face:

@font-face{
    font-family: Graublau Sans Web, Lucida Grande, sans-serif; /* font name */
    src: url('../fonts/WebFont.ttf') format('truetype'), /* CSS file relative path to font with the *.ttf extension */
    font-weight: normal; /* font style option */
    font-style: normal;
}

NOTE. Each font style is written particularly.

It is available to add font with different extensions in CSS file to ensure cross-browser compatibility. Available extensions: *.ttf, *.otf, *.eot, *.woff, *.svg.

After executing the operations, the font will be connected from file on the server.