Google fonts and TinyMCE

问题:

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

回答1:

There is also one more, probably the easiest way to insert google fonts into tinyMCE.

In tinyMCE.init specify as follows:

content_css : "/tinymce_stylesheet.css,http://fonts.googleapis.com/css?family=Sanchez"

And then in tinymce_stylesheet.css you can use any font you imported from Google.

One more tip: Instead of writing new stylesheet from scratch, duplicate the file:

tiny_mce/themes/advanced/skins/default/content.css

...And change the font-family there.

回答2:

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; }

回答3:

I finally solved my problem. After search more than two hour and no solution.

I just add font-face in TinyMCE CSS.

Do this:

1 - Download your google font and past it on your font folder ( Any path you want ) 2 - Go to tinymce\js\tinymce\skins\lightgray and open content.min.css

add

 @font-face {
    font-family: Questrial;
    src: url("fontfolder/yourfont.ttf");
}

in first line before "body".

that's going to be like that

@font-face {
    font-family: Questrial;
    src: url("../../../../../../font/questrial.ttf");
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s.............

and here we are!!!! You got it, simple but HARRRRRRRRD to find! Enjoy it and share this solution.

回答4:

Even easier to make tinymce iframe to load a Google Font including different styles or weights is to replace comma with the url encoded version %2C

so instead something like this:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

would be something like this:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce will ignore the encoded comma and load the font just fine.

回答5:

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'; }

回答6:

Its more easy now after the update of WordPress 3.9. You dont need to touch the core files of WordPress. Just use the following code to include new fonts on your post editor.

Read more detailed tutorial from here.

http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/