Google fonts and TinyMCE

Question

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

Answer 1

I realise this is an old question, but my suggestion, especially if you wish to use more than 1 web font in your content edited with TinyMCE, then you could:

1. Add the fonts selected fron Google WebFonts (or other font provider - use @font-face for this)
2. Define selector classes in your stylesheet (eg. .font-1)
3. Add the classes as custom format selectors in your TinyMCE configuration.

You can also specify true to the style_formats_merge TinyMCE config option, which will add your custom styles to the TinyMCE defaults, rather then overwrite them.

Here is an example of how it looks on a CMS I have developped (here I only added the Lobster Two font, but effectively many fonts could be added if needed):

So in Javascript, part of my configuration looks something like:

tinymce_options = {
  style_formats_merge: true,
  style_formats = [{
    title: "Theme",
    items: [{
      title: "Fonts",
      items: [
        { title: "1. Lobster Two", inline: "span", classes: "font-1"}
      ]
    }, {
      title: "Styles",
      items: [
        /* here add further theme styles if needed... */
      ]
    }]
  }]
};

and in my website's style (or theme), I added:

.font-1 { font-family:'Lobster Two'; }