1. Add font names to the "Custom fonts" filed under the "Typography" section on the "Site Settings" panel, and separate each font name by a comma (",").

b. Create a folder in the /modules/stsitebuilder/upload/ folder, and name the folder, we use "custom-font-a" as an example, and upload .woff2 and .woff files to the folder.
Note 1:  If the /modules/stsitebuilder/upload/ folder doesn't exist, then create it.
Note 2:  If your fonts are not in woff2 and woff formats, quite a lot fonts are in ttf format, then convert them using this tool https://cloudconvert.com/ttf-converter

c. Add the @font-face declaration to the custom css code field which is loaded under the "Custom codes" section on the "Site Settings" panel.
Here is an example.
@font-face { font-family: 'FontName'; src: url('//yourdomain/upload/custom-font-a/fontname.woff2') format('woff2'), url('//yourdomain/upload/custom-font-a/fontname.woff') format('woff'), url('//yourdomain/upload/custom-font-a/fontname.ttf') format('truetype'); }

d. Reload the live edit to get the newly added custom fonts.