Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
add font in tinymce

i use tinymce_advanced last version & wp last version
i want to add a font (@font-face) in the font-selector of the visual editor.

EDIT

I think my question was not understood.
What I want to do is simple.
I would use the typo 'daxbold' in the visual editor. That's it.
I would like the code to do that.

And for information: I use the plugin "tinymce_advanced"

This question has been answered.

Sébastien | French WordpressDesigner | 02/07/12 at 6:36am Edit

Previous versions of this question: 02/07/12 at 9:09am | 02/07/12 at 9:10am

(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
02/07/12
6:40am

Francisco Javier Carazo Gil says:

Sébastien,

Try this: for adding fonts in tinymce here it is go to tinymce\jscripts\tiny_mce\themes\advanced
edit editor_template.js file & add ur font to themes_advanced_fonts

Use "; as a delimiter like theme_advanced_fonts : "Arial=arial,Courier New=courier new;Unikurd Web=unikurd web"

02/07/12 6:51am

Sébastien | French WordpressDesigner says:
I'm sorry francisco but where is this file tinymce\jscripts\tiny_mce\themes\advanced ???

02/07/12 6:52am

Francisco Javier Carazo Gil says:

Sébastien,

In tinyMCE.init() you have to include something like this:

tinyMCE.init({

        ...

        theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n"

});

02/07/12 6:55am

Sébastien | French WordpressDesigner says:
ok... but where ? in a file of the plugin tinymce_advanced ?
02/07/12 7:09am

Sébastien | French WordpressDesigner says:
francisco ?

02/07/12 7:11am

Francisco Javier Carazo Gil says:

Sébastien,

In your function.php you can include this one:



add_filter('tiny_mce_before_init', 'restrict_font_choices' );

function restrict_font_choices( $initArray ) {

    $initArray['theme_advanced_fonts'] =

        'Andale Mono=andale mono,times;'.

        'Arial=arial,helvetica,sans-serif;'.

        //'Arial Black=arial black,avant garde;'.

        'Book Antiqua=book antiqua,palatino;'.

        //'Comic Sans MS=comic sans ms,sans-serif;'.

        'Courier New=courier new,courier;'.

        'Georgia=georgia,palatino;'.

        'Helvetica=helvetica;'.

        //'Impact=impact,chicago;'.

        //'Symbol=symbol;'.

        'Tahoma=tahoma,arial,helvetica,sans-serif;'.

        'Terminal=terminal,monaco;'.

        'Times New Roman=times new roman,times;'.

        'Trebuchet MS=trebuchet ms,geneva;'.

        'Verdana=verdana,geneva;'.

        //'Webdings=webdings;'.

        //'Wingdings=wingdings,zapf dingbats'.

        '';

    return $initArray;

}

02/07/12 7:43am

Sébastien | French WordpressDesigner says:

with this code i can add a font in the font-selector, it's ok :-)
BUT, instead of the others fonts of the selector, if i use my custom font, the text in the editor use arial, and no my font. Do you know what i must to do ?

i have use this code to add the new font in the wp backoffice :



add_action('admin_head','new_fonts'); 



function new_fonts() { ?>

<style>

@font-face {

    font-family: 'DaxBold';

    src: url('<?php echo get_bloginfo('template_url') ?>/font/dax-bold-webfont.eot');

    src: url('<?php echo get_bloginfo('template_url') ?>/font/dax-bold-webfont.eot?#iefix') format('embedded-opentype'),

         url('<?php echo get_bloginfo('template_url') ?>/font/dax-bold-webfont.woff') format('woff'),

         url('<?php echo get_bloginfo('template_url') ?>/font/dax-bold-webfont.ttf') format('truetype'),

         url('<?php echo get_bloginfo('template_url') ?>/font/dax-bold-webfont.svg#DaxBold') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'DaxWideLight';

    src: url('<?php echo get_bloginfo('template_url') ?>/font/daxwide-light-webfont.eot');

    src: url('<?php echo get_bloginfo('template_url') ?>/font/daxwide-light-webfont.eot?#iefix') format('embedded-opentype'),

         url('<?php echo get_bloginfo('template_url') ?>/font/daxwide-light-webfont.woff') format('woff'),

         url('<?php echo get_bloginfo('template_url') ?>/font/daxwide-light-webfont.ttf') format('truetype'),

         url('<?php echo get_bloginfo('template_url') ?>/font/daxwide-light-webfont.svg#DaxWideLight') format('svg');

    font-weight: normal;

    font-style: normal;

}

</style>

 <? }

another thing :
if a text is in tahoma, and if i select this code, in the font-selector i see "tahoma"
if a text is in my new font, and if i select this code, in the font-selector i see "select a font"

02/07/12 7:49am

Francisco Javier Carazo Gil says:
Sébastien,

Look at the class of the new font in the selector and try to do this via CSS.

Respect to the other thing maybe you have to add something more, like a title or label.
02/07/12 7:56am

Sébastien | French WordpressDesigner says:
Look at the class of the new font in the selector and try to do this via CSS.

-> ok... but how can i know the name of the class.

Respect to the other thing maybe you have to add something more, like a title or label.

-> ??
02/07/12 8:05am

Francisco Javier Carazo Gil says:
To get the class name of element, use developers tool in Chrome or Firebug with Firefox.

The second one. You are adding a font directly to WP admin not to TinyMCE, maybe your problem is a bug.
02/07/12 8:10am

Sébastien | French WordpressDesigner says:
To get the class name of element, use developers tool in Chrome or Firebug with Firefox.

-> i use firebug and don't see the name of the class (there is no class in fact, on the text i select)

The second one. You are adding a font directly to WP admin not to TinyMCE, maybe your problem is a bug.

-> Yes and that's exactly my original question... How add a font in tinymce ? :-)

02/07/12 8:22am

Francisco Javier Carazo Gil says:

In the code I pasted before add another line to the array:



add_filter('tiny_mce_before_init', 'restrict_font_choices' );



function restrict_font_choices( $initArray ) {

 $initArray['theme_advanced_fonts'] =

        'DaxBold=dax-bold-webfont;'.

02/07/12 8:43am

Sébastien | French WordpressDesigner says:

euh... ok...
before, i had use this line :

'DaxBold=\'DaxBold\',arial,helvetica,sans-serif;'.

but now i do like you say and i use this line

 'DaxBold=dax-bold-webfont;'.

so the code become :

add_filter('tiny_mce_before_init', 'restrict_font_choices' );

function restrict_font_choices( $initArray ) {

    $initArray['theme_advanced_fonts'] =

        'DaxBold=dax-bold-webfont;'.

        'Andale Mono=andale mono,times;'.

        'Arial=arial,helvetica,sans-serif;'.

        //'Arial Black=arial black,avant garde;'.

        'Book Antiqua=book antiqua,palatino;'.

        //'Comic Sans MS=comic sans ms,sans-serif;'.

        'Courier New=courier new,courier;'.

        'Georgia=georgia,palatino;'.

        'Helvetica=helvetica;'.

        //'Impact=impact,chicago;'.

        //'Symbol=symbol;'.

        'Tahoma=tahoma,arial,helvetica,sans-serif;'.

        'Terminal=terminal,monaco;'.

        'Times New Roman=times new roman,times;'.

        'Trebuchet MS=trebuchet ms,geneva;'.

        'Verdana=verdana,geneva;'.

        //'Webdings=webdings;'.

        //'Wingdings=wingdings,zapf dingbats'.

        '';

    return $initArray;

}

and now when i apply the font "daxbold" on a text, in the visual editor, the resultat is :

<span style="font-family: dax-bold-webfont;">test</span>

and ?

02/07/12 9:11am

Sébastien | French WordpressDesigner says:
I think my question was not understood.
What I want to do is simple.
I would use the typo 'daxbold' in the visual editor. That's it.
I would like the code to do that.

And for information: I use the plugin "tinymce_advanced"

Last edited:
02/07/12
6:42am
Arnav Joy says:
please check this plugin

http://wordpress.org/extend/plugins/anyfont/
- 02/07/12 6:45am
  
  Arnav Joy says:
  check this link
  
  http://www.tinymce.com/wiki.php/Configuration:theme_advanced_fonts
- 02/07/12 6:52am
  
  Sébastien | French WordpressDesigner says:
  no plugin
  no link
  a code please :-)
- 02/07/12 9:11am
  
  Sébastien | French WordpressDesigner says:
  I think my question was not understood.
  What I want to do is simple.
  I would use the typo 'daxbold' in the visual editor. That's it.
  I would like the code to do that.
  
  And for information: I use the plugin "tinymce_advanced"

Last edited:
02/07/12
7:50am

idt says:

Hi,

Also please note that if the font you wanted to add is a custom font, example Google font, you'd need to add the associated style for it so it renders texts with the new custom font-face. You can check this blog entry: http://maxfoundry.com/blog/2011/11/07/how-to-add-google-web-fonts-to-your-tinymce-editor-in-wordpress/

Thanks,
idt

Previous versions of this answer: 02/07/12 at 7:50am

02/07/12 7:52am

idt says:

This is what's in that blog:



add_action('admin_head', 'load_tiny_mce');



function load_tiny_mce() {

     // Custom font you want to add

     $theme_advanced_fonts = 'Aclonica=Aclonica, sans-serif;';



     // Default fonts for TinyMCE

	$theme_advanced_fonts .= 'Andale Mono=Andale Mono, Times;';

	$theme_advanced_fonts .= 'Arial=Arial, Helvetica, sans-serif;';

    $theme_advanced_fonts .= 'Arial Black=Arial Black, Avant Garde;';

    $theme_advanced_fonts .= 'Book Antiqua=Book Antiqua, Palatino;';

    $theme_advanced_fonts .= 'Comic Sans MS=Comic Sans MS, sans-serif;';

    $theme_advanced_fonts .= 'Courier New=Courier New, Courier;';

    $theme_advanced_fonts .= 'Georgia=Georgia, Palatino;';

    $theme_advanced_fonts .= 'Helvetica=Helvetica;';

    $theme_advanced_fonts .= 'Impact=Impact, Chicago;';

    $theme_advanced_fonts .= 'Symbol=Symbol;';

    $theme_advanced_fonts .= 'Tahoma=Tahoma, Arial, Helvetica, sans-serif;';

    $theme_advanced_fonts .= 'Terminal=Terminal, Monaco;';

    $theme_advanced_fonts .= 'Times New Roman=Times New Roman, Times;';

    $theme_advanced_fonts .= 'Trebuchet MS=Trebuchet MS, Geneva;';

    $theme_advanced_fonts .= 'Verdana=Verdana, Geneva;';

    $theme_advanced_fonts .= 'Webdings=Webdings;';

    $theme_advanced_fonts .= 'Wingdings=Wingdings, Zapf Dingbats';



    // Styles for the font you want to add

    $content_css = 'http://fonts.googleapis.com/css?family=Aclonica,';





    // The 'mode' and 'editor_selector' options are for adding

    // TinyMCE to any textarea with class="tinymce-textarea"

    wp_tiny_mce(false, array(

        'mode' => 'specific_textareas',

        'editor_selector' => 'tinymce-textarea',

        'theme_advanced_fonts' => $theme_advanced_fonts,

        'content_css' => $content_css

    ));

 }

02/07/12 7:56am

Sébastien | French WordpressDesigner says:
i know this link
02/07/12 8:14am

Sébastien | French WordpressDesigner says:
with this code, all icons of the visual editor disappeared

Last edited:
02/07/12
8:27am
Luis Abarca says:
if i use my custom font, the text in the editor use arial, and no my font. Do you know what i must to do ?

To this part, you need custom editor styles

In your functions.php
```
<?php add_editor_style( get_bloginfo('stylesheet_directory') . '/css/editor.css'); ?>
```
{themepath}/css/editor.css
```
* {

    font-family: Georgia, "Bitstream Charter", serif;

    color: #444;

    line-height: 1.5;

}



/* more styles */
```
Previous versions of this answer: 02/07/12 at 8:27am
- 02/07/12 8:46am
  
  Sébastien | French WordpressDesigner says:
  with this code all text use georgia... that's it ?
  
  But i just want that the font daxbold is apply on the span when the the spna is like that :
```
<span style="font-family: 'DaxBold',arial,sans-serif;">test</span>
```
- 02/07/12 9:00am
  
  Luis Abarca says:
  Yep, but this styles are for the WYSIWYG editor styles, so maybe the SPAN need a class.
```
span.daxbold {

    font-family: 'DaxBold', Arial, Sans-serif;

}
```
- 02/07/12 9:08am
  
  Sébastien | French WordpressDesigner says:
  okay...
  that's exactly my problem...
  i know that this process add a css on my class...
  but i have no class
  the class ".daxbold" not exists.
  
  I think my question was not understood What I want to do is simple.
  I'd use the font 'daxbold' in the visual editor. That's it.
  I would like the code to do that.
  
  And for information: I use the plugin "tinymce_advanced"

This question has expired.

Gabriel Reguly, Sébastien | French WordpressDesigner voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$10 add font in tinymce

(4) Possible Answers Submitted...

$10
add font in tinymce