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.
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.