How to Add Custom Font and Typography

1) Paste this code into Custom CSS field. This will tell your theme to load a custom font.

@font-face {
    font-family: 'MyWebFont';
    src: url('http://yoursite.com/fonts/webfont.eot'); / IE9 Compat Modes /
    src: url('http://yoursite.com/fonts/webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
    url('http://yoursite.com/fonts/webfont.woff2') format('woff2'), / Super Modern Browsers /
    url('http://yoursite.com/fonts/webfont.woff') format('woff'), / Pretty Modern Browsers /
    url('http://yoursite.com/fonts/webfont.ttf') format('truetype'), / Safari, Android, iOS /
    url('http://yoursite.com/fonts/webfont.svg#svgFontName') format('svg'); / Legacy iOS / }

Just put absolute paths to your font files. Note that you need to have different file formats since some browser will use only certain file type as explained here https://css-tricks.com/snippets/css/using-font-face/

2) Then use this CSS code by placing it inside Custom CSS field as well for the specific CSS class you want to use the font:

body, h1{font-family: 'MyWebFont', sans-serif;}

The example above will use the custom font called "MyWebFont" for the Body and H1 class.

Another option is use the plugin called:  "Use Any Font". Some customers have recommended it but we didn't test it.