Wordpress SEO - What are you looking for?

If you're looking for answers to SEO or wordpress related questions, type in a phrase and wait for hints or click enter! The results also show links to external sources.

161 articles in the database

How to add selected Google fonts to TinyMCE Advanced editor?

[ Article content is protected by Plagiashield ]


W previous article I was picking up a topic about adding (restoring) the underline and justify text buttons in the editor. One way to do this is to use the plugin TinyMCE Advancedwhich replaces the standard editor and allows you to use a number of additional options when adding and publishing entries. In today's article I will show you how to can be add custom fonts Google do TinyMCE Advanced.

Using creative web fonts allows you to create unique designs that will make your website stand out from pages competitors. Interesting web fonts can be found at Google Fonts, which offers 500+ different typographies to use. Documentation on their integration can also be found at website service, like and on webmaster blogs. In today's article, I will show you how we can use Google fonts when editing content through the TinyMCE Advanced plugin.

Before To add fonts to the plug-in, select from websites Google Fonts. My choice of 4 typographies was Aclonica, Summer, Michroma and Paytone One.

To connectwhethermend the selected fonts to the TinyMCE Advanced plugin, you need to modify the theme function file. We will use the built-in editor to make the necessary changes. Go to Appearance => Editor and open the file functions.php.

We add a code snippet to the given file 3:

add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
    $theme_advanced_fonts = 'Aclonica=Aclonica;';
    $theme_advanced_fonts .= 'Summer=Summer;';
    $theme_advanced_fonts .= 'Michroma=Michroma;';
    $theme_advanced_fonts .= 'Paytone One=Paytone One;';
    $initArray['font_formats'] = $theme_advanced_fonts;
    return $initArray;

Using the above function wpex_mce_google_fonts_array run the font selection in the editor's drop-down menu. The wpex_mce_google_fonts_styles function allows you to display the font style (its "thickness"):

add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
   $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font1 ) );
   $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font2 ) );
   $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font3 ) );
   $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font4 ) );

The last piece of code allows you to integrate fonts into your system.

add_action( 'admin_head-post.php', 'cwc_fix_html_editor_font' );
// add_action( 'admin_head-post-new.php', 'cwc_fix_html_editor_font' );
add_action( 'wp_head', 'cwc_fix_html_editor_font' );
function cwc_fix_html_editor_font() { ?

We save all the changes and open any entry for editing. Let's try to change the text style with new Michrom's font.

As you can see on the above screen, in the drop-down menu there are 4 selected via fonts (they have replaced the editor's standard typography). We save all changes and go to the article page:

As you can see text article has been changed to the Michrom font.



O Janusz Kaminski

Company marketing specialist TemplateMonster. He has been working in the IT industry for 5 years. He has experience in SEO, internet marketing. Apart from that he is interested in web designing.
  • Internal Links and Sematics

  • Link building
  • Sematics
  • Link building has never been easier. Hundreds of link possibilities in one click.
  • See

[ Article content is protected by Plagiashield ]

SEMRush - the best tool for SEO and PPC.

Read previous post:
How to change your website address on WordPress?

From this article you will learn about wordpress and how changing domain affects organic traffic and how to make a change of address....