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

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:
  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:
  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:
  6. Now to show the dropdown on the editor, you need to implement mce_buttons filter:


User Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

    Get in Touch