1) Make sure you have permission or the proper license to use the font on your website
2) Use CSS’s @font-face and font-family declarations to load the desired font file through your theme’s CSS stylesheet and tell browsers when and where to use that font-family.
http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/ has a decent rundown on how to add custom fonts to your WordPress site.
Common misconception of non “Graphic” people. You can not use all fonts that are on your computer on a web page. You must own a license for a font to use it.
https://www.fonts.com/web-fonts
Web designers use free web fonts on web sites and a HUGE library of them can be found here: https://fonts.google.com/
Here is a Google substitute that you can use for free
https://fonts.google.com/specimen/Varela+Round
Add this line to your theme’s CSS
@import url(‘https://fonts.googleapis.com/css?family=Varela+Round’);
and define it in your css like this:
p.classname {font-family: ‘Varela Round’;}
