CKeditor for Drupal 7: add custom fonts

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