If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to replace Cufon fonts with Google WEB fonts

This tutorial shows how to replace Cufon with Google font in WordPress templates.

WordPress. How to replace Cufon fonts with Google WEB fonts.

  1. In some WordPress templates menus, titles and headings text is created with Cufon generated fonts.
    You can inspect an appropriate item with Firebug in order to make sure that cufon font is being used for the particular text:

    Wordpress How to replace Cufon with Google font-1

  2. First of all, you should remove all cufon script calls in the template files. Make sure that you have unzipped the template package:

    Wordpress How to replace Cufon with Google font-2

  3. Open the software that allows searching text inside files. We are using Notepad++ software. Press Ctrl+F in order to open Search dialog, select Find in Files tab.
    Specify cufon in Find What section. Select location of template files. Make sure that all options of search are the same as we have. Click on Find All:

    Wordpress How to replace Cufon with Google font-3

  4. We can see the list of files in which keyword cufon is being used. We should edit files that call cufon scripts. Do not change cufon scripts themselves. In our case the following files have to be modified: wp-content\themes\themeXXXX\includes\theme-scripts.php, themeXXXX\footer.php, themeXXX\header.php (XXXX are actual theme numbers). Please check video version of tutorial for more detailed information:

    Wordpress How to replace Cufon with Google font-4

  5. Save changes you have performed to files and replace the original ones. IMPORTANT: Be sure to perform back up of template files before replacing.

  6. Refresh your site. You have removed cufon fonts:

    Wordpress How to replace Cufon with Google font-5

  7. Now you should add Google fonts. Open Google fonts page. Select an appropriate font, Click Add to Collection, click Use after that:

    Wordpress How to replace Cufon with Google font-6

  8. Select an appropriate character set:

    Wordpress How to replace Cufon with Google font-7

  9. Open @import tab. There you can see the code that you should add to .css file. You will see an appropriate font family as well. You should specify it for particular element:

    Wordpress How to replace Cufon with Google font-8

  10. We are going to set Google font for menu titles. Inspect elements using Firebug and find an appropriate code. We can see that changes should be performed in style.css file:

    Wordpress How to replace Cufon with Google font-9

  11. Go to Appearance – Editor and open style.css file. Copy @import code and add it at the beginning of css file:

    Wordpress How to replace Cufon with Google font-10

  12. Locate css code for the appropriate element. Add font-family property:

    Wordpress How to replace Cufon with Google font-11

  13. Save changes and refresh the page. We have added Google font for menu:

    Wordpress How to replace Cufon with Google font-12

  14. Let’s add Google font for titles.

  15. Inspect the title. We can see that appropriate code is located in themeXXX/css/normalize.css file:

    Wordpress How to replace Cufon with Google font-13

  16. Add @import reference to google font. Add font-family property. Save changes and upload the modified file:

    Wordpress How to replace Cufon with Google font-14

  17. Save changes and upload the modified file. Refresh the page. You have added Google font for titles:

    Wordpress How to replace Cufon with Google font-15

  18. You can perform the same actions to the rest titles/text.

Feel free to check the detailed video tutorial below:

WordPress. How to replace Cufon fonts with Google WEB fonts.