WYSIWYG editor with custom fonts for Drupal 7

1-Disabled Media WYSIWYG View Mode and WYSIWYG modules
2-Downloaded CK Editor drupal module: https://www.drupal.org/project/ckeditor
3-Installed/configured module, Advanced toolbar: http://prntscr.com/6i3qfn Full: http://prntscr.com/6i3qx7
4-Modified CK Editor's css:
FILE: /sites/all/modules/ckeditor/css/ckeditor.css (line1):

@font-face {
    font-family: 'Open Sans';
    src: url('http://fonts.googleapis.com/css?family=Open+Sans');
}
@font-face {
    font-family: 'Lato';
    src: url('http://fonts.googleapis.com/css?family=Lato');
}
@font-face {
    font-family: 'Oswald';
    src: url('http://fonts.googleapis.com/css?family=Oswald');
}

5-Changed the CKeditor configuration: admin>config>content>ckeditor
6-Clicked on edit against the profile for which we need the fonts
7-Clicked Advanced Options, went to Custom Javascript and added:

config.font_names ='Alegreya-Black; BadScript-Regular; BilboSwashCaps';

config.fontSize_sizes = '16/16px;24/24px;48/48px';

8-Saved changes