Adding New Google Font

Hi.

I was trying to add a new google font (lato) to CKEditor and tried different soluions mentioned here and on stackoverflow but couldn't succed. So i am posting my question here again.

I added the following lines in the config.js file 

config.contentsCss = 'fonts.css';

config.font_names = 'Lato/lato;' + config.font_names;

and added the following lines in font.css

@font-face {
    font-family: 'lato';
    src: url('fonts/lato.eot');
    src: local('☺'), url('fonts/lato.woff') format('woff'), url('fonts/lato.ttf') format('truetype'), url('fonts/lato.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

I am able to see the font in the drop down but nothing changed when i apply the font.

1- Where should i place this fonts.css file ? (currently i placed this file in ckeditor's root folder.)

2- For font files, i have created a new folder in ckeditor root named as fonts and placed the font in it with following extensions. eot, otf, woff, ttf, svg

Any help would be greatly appreciated.

Thanks

Abdul Mannan