Install a new font .otf file using css

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';
}

Leave a Reply

Your email address will not be published. Required fields are marked *