add font in tinymce WordPress

Sébastien | French WordpressDesigner comments:

I'm sorry francisco but where is this file tinymce\jscripts\tiny_mce\themes\advanced ???

Francisco Javier Carazo Gil comments:

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

Sébastien | French WordpressDesigner comments:

ok... but where ? in a file of the plugin tinymce_advanced ?

Sébastien | French WordpressDesigner comments:

francisco ?

Francisco Javier Carazo Gil comments:

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


Sébastien | French WordpressDesigner comments:

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"

Francisco Javier Carazo Gil comments:

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.

Sébastien | French WordpressDesigner comments:

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

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


<blockquote>Respect to the other thing maybe you have to add something more, like a title or label.</blockquote>
-> ??

Francisco Javier Carazo Gil comments:

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.

Sébastien | French WordpressDesigner comments:

<blockquote>To get the class name of element, use developers tool in Chrome or Firebug with Firefox.</blockquote>
-> i use firebug and don't see the name of the class (there is no class in fact, on the text i select)


<blockquote>The second one. You are adding a font directly to WP admin not to TinyMCE, maybe your problem is a bug.</blockquote>
-> Yes and that's exactly my original question... How add a font in tinymce ? :-)

Francisco Javier Carazo Gil comments:

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


Sébastien | French WordpressDesigner comments:

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 ?

Sébastien | French WordpressDesigner comments:

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"