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(''); / IE9 Compat Modes /
    src: url('') format('embedded-opentype'), / IE6-IE8 /
    url('') format('woff2'), / Super Modern Browsers /
    url('') format('woff'), / Pretty Modern Browsers /
    url('') format('truetype'), / Safari, Android, iOS /
    url('') 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

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.