How to install fonts correctly?

I tried everything to install the font files from my computer to the style.css within the my website. But still, the font it shows still isn’t what I desired.

e.g.,

@font-face
 {
	font-family: KlinicSlabBold;
	src: url('https://ubcmun.org/webroot/UBCMUN2017/wp-content/themes/sydney/fonts/KlinicSlabBold.otf') format('otf'), url('https://ubcmun.org/webroot/UBCMUN2017/wp-content/themes/sydney/fonts/klinicslabbold-webfont.woff') format('woff'), url('https://ubcmun.org/webroot/UBCMUN2017/wp-content/themes/sydney/fonts/klinicslabbold-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;

}
.name
{
	font-family: KlinicSlabBold,serif;
}

Instead of having KlinicSlabBold as the font in the class .name (where the names of employees belong), AdobeCaslonPro is the font. Therefore, how to make KlinicSlabBold the font of the website, and have it visible despite that the users still haven’t installed KlinicSlabBold in their computer?

*I have already added those files within the src to the file manager

The website I am working on: https://ubcmun.org/UBCMUN2017/