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

add font in tinymce WordPress

  • SOLVED

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.

<strong>EDIT</strong>

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"

Answers (4)

2012-02-07

Francisco Javier Carazo Gil answers:

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"


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 ?



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"

2012-02-07

Arnav Joy answers:

please check this plugin

http://wordpress.org/extend/plugins/anyfont/


Arnav Joy comments:

check this link

http://www.tinymce.com/wiki.php/Configuration:theme_advanced_fonts


Sébastien | French WordpressDesigner comments:

no plugin
no link
a code please :-)


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"

2012-02-07

idt answers:

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: [[LINK href="http://maxfoundry.com/blog/2011/11/07/how-to-add-google-web-fonts-to-your-tinymce-editor-in-wordpress/"]]http://maxfoundry.com/blog/2011/11/07/how-to-add-google-web-fonts-to-your-tinymce-editor-in-wordpress/[[/LINK]]

Thanks,
idt


idt comments:

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


Sébastien | French WordpressDesigner comments:

i know this link


Sébastien | French WordpressDesigner comments:

with this code, all icons of the visual editor disappeared

2012-02-07

Luis Abarca answers:

<blockquote>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 ?</blockquote>

To this part, you need custom editor styles

In your functions.php

<?php [[LINK href="http://codex.wordpress.org/Function_Reference/add_editor_style"]]add_editor_style[[/LINK]]( 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 */


Sébastien | French WordpressDesigner comments:

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>


Luis Abarca comments:

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


Sébastien | French WordpressDesigner comments:

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"