Default selected font issue for custom font in the Typography.

I ended up using something like the following to have Lato as a custom font and set it as my default font:

editor.on('load', function () {
         //Add Lato Font & Set as Default
        const fontProperty = editor.StyleManager.getProperty('Typography', 'font-family');
        fontProperty.addOption({value: `Lato, Helvetica, Arial, sans-serif`, name: 'Lato'});
        fontProperty.set('defaults', `Lato, Helvetica, Arial, sans-serif`);
    });

this way Lato is checked by default. And of course have the body CSS declare it as your default font as well.

The problem here is the computed font of the selected component. You need to have that computed font inside your list otherwise you won't see it. As already suggested by @jrking4 you can set your default font-family to the body

i found the answer : you have to add your font in single or double quotes otherwise it wont detect the font like this

editor.on('load', function () {
        styleManager = editor.StyleManager;
        fontProperty = styleManager.getProperty('Typography', 'font-family');
        var list = [];
        fontProperty.set('list', list);
        list = [
            fontProperty.addOption({value: '"Open Sans"', name: 'Open Sans'}),
            fontProperty.addOption({value: "Montserrat", name: 'Montserrat'}),
            fontProperty.addOption({value: "Lato", name: 'Lato'}),
            fontProperty.addOption({value: '"Source Sans Pro"', name: 'Source Sans Pro'}),
            fontProperty.addOption({value: "Raleway", name: 'Raleway'}),
            fontProperty.addOption({value: "Roboto", name: 'Roboto'}),
            fontProperty.addOption({value: "Oswald", name: 'Oswald'}),
//            fontProperty.addOption({value: '"Helvetica Neue"', name: 'Helvetica'}),
//            fontProperty.addOption({value: '"Times New Roman"', name: 'Times New Roman'}),
//            fontProperty.addOption({value: '"Arial Black"', name: 'Arial Black'}),
//            fontProperty.addOption({value: '"Tahoma"', name: 'Tahoma'}),
//            fontProperty.addOption({value: '"Verdana"', name: 'Verdana'}),
//            fontProperty.addOption({value: '"Courier New Courier"', name: 'Courier New Courier'}),
        ];
        fontProperty.set('list', list);
        styleManager.render();
    });

because we write font in our css like : font-family: 'Oswald' html in browse auto convert single quotes to double quotes, when the font match with html and included font in JS it will show in the drop down but some font like Lato is not detect so and this font in browser appear like : font -family : Lato , without single quotes so i wrote this font only double quotes. and other are double quotes inside single quotes i hope someone who has this issue will fix.