Google fonts and TinyMCE

Question

Can google fonts be used with tinyMCE? how can this be done?

Answer 1

Yes, this is possible, I will describe two ways to achieve this.

Way #1: Example: google font Cantarell using own plugin

In order to make it work you will need to write your own tinymce plugin and place this code into the tinymce iframes header. Use the onInit event in your own plugin to add it.

This will look like:

  ed.onInit.add(function(){
    with(document.getElementById(iframe_id).contentWindow)
    {           
        var h=document.getElementsByTagName("head");
        var newStyleSheet=document.createElement("link");
        newStyleSheet.rel="stylesheet";
        newStyleSheet.href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin";
        h[0].appendChild(newStyleSheet);
    }
  });

Additionally you will have to add the desired font to your css in order to apply it. You may use the tinmyce init parameter content_css. There you need to specify something like:

p { font-family: 'Cantarell', arial, serif; }

Way #2: Example: google font Cantarell using font-face declaration

You can download the font directly from google fonts.

Place the font file (i.e. Cantarell-Regular.ttf) somewhere on your server (be aware that IE (Internet Explorer) usually needs eot-files). Now all you need to do is to use a @font-face declaration in your content_css

@font-face {font-family: "my_own_family"; src: url("http://mydomain.com/fonts/Cantarell-Regular.ttf");}

and apply it to a css element. Example:

p { font-family: 'my_own_family', helvetica, arial, serif; }