if else condition in angularjs to compare string and int value

I want to check if both the font and the fontSize is undefined which was sent from the client side.When the user do not select the font or font size, it pass the value undefined. These conditions work well when only one of them (font or font size) is undefined, but when both of them are undefined, I recieve an error,

TypeError: Cannot read property 'font' of undefined
    at Scope.StylesCtrl.$scope.addStyles (http://ift.tt/1ie3M6q)
    at fn (eval at <anonymous> (http://ift.tt/1IxDqBe), <anonymous>:4:317)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (http://ift.tt/1ie3M6u)
    at Scope.$get.Scope.$eval (http://ift.tt/1IxDqBj)
    at Scope.$get.Scope.$apply (http://ift.tt/1ie3Jr5)
    at HTMLInputElement.<anonymous> (http://ift.tt/1IxDsZO)
    at HTMLInputElement.jQuery.event.dispatch (http://ift.tt/1ie3MmK)
    at HTMLInputElement.jQuery.event.add.elemData.handle (http://ift.tt/1IxDqBm) undefined

Below is my if else conditions in the server side,

if(font == undefined && fontSize == undefined){ //doesn't work
        console.log("font");
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color}
        ], function (err) {
            console.log((err));
        });
    }

    else if(font == undefined){ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
        ], function (err) {
            console.log((err));
        });
    }
    else if(fontSize == undefined){ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFont", target: "font-family", replacer: font}
        ], function (err) {
            console.log((err));
        });
    }

    else{ //work well
        updateFile(main, [
            {rule: ".made-easy-themeColor", target: "color", replacer: color},
            {rule: ".made-easy-themeFont", target: "font-family", replacer: font},
            {rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
        ], function (err) {
            console.log((err));
        });

    }

This is the html code in front end

 <h3 ng-style="{'font-family': styles.textSize.font, 'font-size': styles.textSize.size + 'px'}">Text Is</h3>

This is the controller to send data to the server

$scope.addStyles = function(styles) {
            $scope.fontdata = {
                appId: "55c0ace94aa248735d75b140",
                header: styles.uploadme,
                color: styles.myColor,
                font: styles.textSize.font,
                fontSize: styles.textSize.size
            };
                stylesService.editStyles($scope.fontdata)
                    .success(function (res) {
                        console.log("success");
                    })
        };

Is there any problem with my if else statements? or is it because I am comparing string value(font) and an int value(fontSize)?