Custom fonts with CKeditor and Rails - ruby-on-rails

Question

In my Rails 4.2 app,I am trying to add new fonts to the CKeditor Toolbar, what I did is the following :
As the documentation says to customize ckeditor I added 2 files :
app/assets/javascripts/ckeditor/config.js
app/assets/javascripts/ckeditor/contents.css
in te config.js I have this code :
CKEDITOR.editorConfig = function(config) {
config.contentsCss = 'contents.css';
config.font_names = 'Open Sans;' + config.font_names;
config.toolbar = [
['Styles', 'Format', 'Font', 'FontSize']
];
}
in the contents.css I have this code :
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Here the 'Open Sans' is added to the fonts in the toolbar's drop-down, but when i try to apply the 'Open Sans' font to a text it doesn't work !
For now I get this error in the firebug console :
"NetworkError: 404 Not Found - http://members.lvh.me:3000/posts/assets/contents.css"
I tried to change the above : config.contentsCss = 'contents.css'; to config.contentsCss = '/assets/javascripts/ckeditor/contents.css'; but it still shows the same 404 Not Found error !!
Also I think even if I fix that it will still don't apply the font ! Is here anyone who know the solution ?
Update :
I replaced the config.contentsCss = 'contents.css'; with config.contentsCss = '/assets/ckeditor/contents.css'; and the error disappear, but when I try to apply the font to a text, there is no change !

Answer 1

After a full day of research I finally found a solution which work well for my need, I hope this can help someone in the same situation (so you don't have to struggle like I did )
just add the following code to your app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = function(config) {
// .....
// .....
// an array of fonts from "google fonts", I listed 3 fonts here
myFonts = ['Architects Daughter', 'Open Sans', 'Dancing Script'];
config.font_names = 'sans serif';
for(var i = 0; i<myFonts.length; i++){
config.font_names = config.font_names+';'+myFonts[i];
myFonts[i] = 'http://fonts.googleapis.com/css?family='+myFonts[i].replace(' ','+');
//assuming you use jquery
$("head").append("<link rel='stylesheet' href='"+ myFonts[i] +"'>");
}
}
just to mention that this solution is founded here : http://ckeditor.com/forums/CKEditor-3.x/CKE-and-Google-Fonts-Api, thanks to 'naveenram'