To add a new google font please follow the steps below:
1-Download and add at ‘font’ folder, the new font files

2-Go to file specular\admin\inc\fields\typography\googlefonts.json and list the new font here.
Add this code at the end of the list:
"new_font_name": {
"variants": [{
"id": "400",
"name": "Normal 400"
}],
"subsets": [{
"id": "latin",
"name": "Latin"
}]
}
3-In the same folder, find file googlefonts.php and add this line:
"new_font_name":{"variants":[{"id":"400","name":"Normal 400"}],"subsets":[{"id":"latin","name":"Latin"}]},
at the end of font list. (It may be a little confusing but be careful not to mess up the commas)

4-The last step, go to file googlefonts.html and add in between the other fonts, this line:

<option data-google="true" value="New_font_name">New_font_name</option>
This will show up the font in the Typography Options > Font Family list.

To a custom font follow these steps:
We will use the custom font “Calibri” since is not included in fonts list.
1-Download font files and add them into your fonts folder. Location: wp-content/themes/specular/fonts.

2-Add this code into your style.css file:
@font-face {
font-family: Calibri;
src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);
font-weight: normal;
}
Replace font source url with your current one.

3-Add this code into your custom css box, to set this font for the menu:
`nav .menu > li > a {font-family: “Calibri” !important;}`

Save everything and refresh!