Add Font

In CSS 3, it has become possible to add non-standard fonts through the @font-face keyword.

@font-face {
    font-family: 'FontName';
    src: local('FontName'), url('font.ttf'); /* font path */
}

/* apply connected font */
p {
    font-family: 'FontName';
}

It is worth paying attention to the src property. The local() parameter tries to use the font from the site visitor’s computer, otherwise it loads and displays the font from the url() parameter.

If the text should be highlighted in bold or italics, then you need to connect the appropriate fonts for each style.

/* standard font style */
@font-face {
    font-family: 'FontName';
    src: url('font.ttf');
}

/* to highlight bold */
@font-face {
    font-family: 'FontName';
    font-weight: 700;
    src: url('fontBOLD.ttf');
}

/* for italics */
@font-face {
    font-family: 'FontName';
    font-style: italic;
    font-weight: 400;
    src: url('fontITALIC.ttf');
}

The code above will load three different fonts (or one font with three different styles).

It is worth noting that the font names are the same everywhere (the font-family property). To connect the font with the desired style, you need to add an additional parameter that is specified in the font definition.

/* set standard font */
body {
    font-family: 'FontName';
}

/* connect font with bold selection */
strong {
    font-weight: 700;
}

/* connect italicized font */
em {
    font-style: italic;
    font-weight: 400;
}