Integration of 2 Font Families – Fira Sans 300,700 and Nobile 400,700

• June 10, 2015
• Leave a comment

WordPress is a highly dynamic and versatile CMS that allows you to add multiple features of your choice to enhance the technical aura of your website/blog. There are a number of complex customization’s in WordPress, but they are highly productive and user friendly if understood and executed in the most effective manner.

For integrating two font families (“Fira Sans 300,700” and “Nobile 400,700”) as per client requirement in his website, we added these families to WordPress editor as dropdowns for text, for header and also for content in website slider (Revolution Slider). The process is as follows:

Steps: Dropdown for WordPress Editor

1. Create a CSS file containing the fonts declaration (i-e font-faces) for each font. You may need to generate font-faces, for this there is a bunch of online applications like font-squirrel (which is preferred to use), it will generate font-face for you.
2. After creation of font face and putting it in the CSS file, you have to add classes that will contain the font families and it will do the magic for both back-end editor as well as the front-end website:
   
   .firasans300{ font-family: 'fira_sanslight', sans-serif; font-weight: 400; } .firasans700{ font-family: 'fira_sansbold', sans-serif; font-weight: 400; }

   1 2 3 4 5 6 7 8

   .firasans300{    font-family: 'fira_sanslight', sans-serif;    font-weight: 400; } .firasans700{    font-family: 'fira_sansbold', sans-serif;    font-weight: 400; }

3. After creating the stylesheet, you need to add it to your theme using wp_equeue_style().
4. Also you need to add this stylesheet to WordPress editor using the filter mce_css to ensure the styling of the text in editor:
   
   function include_to_mce(){ return get_template_directory_uri().'/css/firasans.css'; } add_filter('mce_css', 'include_to_mce');

   1 2 3 4

   function include_to_mce(){     return get_template_directory_uri().'/css/firasans.css'; } add_filter('mce_css', 'include_to_mce');

5. After adding the stylesheet, you need to add an option to WordPress editor’s format that dropdown to implement the style on the respective text:
   
   function add_custom_style_mce($init){ // Create array of new styles $new_styles = array( array( 'title' => __( 'Custom Fonts', 'wpex' ), 'items' => array( array( 'title' => __('Fira Sans 300','wpex'), 'inline' => 'span', 'classes' => 'firasans300', ), ), ), ); // Add new styles $init['style_formats'] = json_encode( $new_styles ); // Return New Settings return $init; } add_filter( 'tiny_mce_before_init', 'add_custom_style_mce' );

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   function add_custom_style_mce($init){    // Create array of new styles    $new_styles = array(        array(           'title' => __( 'Custom Fonts', 'wpex' ),           'items' => array(               array(                  'title' => __('Fira Sans 300','wpex'),                  'inline' => 'span',                  'classes' => 'firasans300',               ),            ),        ),    );    // Add new styles    $init['style_formats'] = json_encode( $new_styles );    // Return New Settings      return $init; } add_filter( 'tiny_mce_before_init', 'add_custom_style_mce' );

6. Now to show the dropdown on the editor, you need to implement mce_buttons filter:
   
   function custom_styleselect($buttons){ array_push($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons', 'custom_styleselect');

   1 2 3 4 5

   function custom_styleselect($buttons){    array_push($buttons, 'styleselect');    return $buttons; } add_filter('mce_buttons', 'custom_styleselect');

Conclusion: