Install a font file using css: otf, ttf, woff, etc.

First step: upload the .otf to the server so its accessible by the css file.

Add this bit of code to the top of your css file to activate a new font using its .otf file.

In this case, the .otf file was placed in the fonts folder on the same level as the css file.

@font-face {
  font-family: 'Arial';
  src: url('./Arial.eot');
  src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}

Here’s how to use that newly added font. The font name below must be exactly the same as the defined “font-family” name above.

body {
  font-family: 'Arial';
}