What you need to do is add your font file/s to the Essential/fonts/ directory and then add the CSS that you need to declare that font by adding the following...where 'My Web Font' and 'webfont' represent the name of the font you are going to use. You also only need to include the file type of the ones you have files of.
@font-face {
font-family: 'MyWebFont';
font-weight: normal;
font-style: normal;
src: url([[font:theme|webfont.eot]]); /* IE9 Compat Modes */
src: url([[font:theme|webfont.eot?#iefix']]) format('embedded-opentype'), /* IE6-IE8 */
url([[font:theme|webfont.woff]]) format('woff'), /* Modern Browsers */
url([[font:theme|webfont.ttf]]) format('truetype'), /* Safari, Android, iOS */
url([[font:theme|webfont.svg#svgFontName]]) format('svg'); /* Legacy iOS */
}
Then you need to write the CSS rules as normal to style your theme as required, be it in the body or headers or selected areas. You can add this extra CSS to the Essential stylesheet of in the Essential Custom CSS settings page.
Hope this helps?
Mary