This tutorial shows how to replace Cufon with Google font in WordPress templates.
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:
First of all, you should remove all cufon script calls in the template files. Make sure that you have unzipped the template package:
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:
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:
Save changes you have performed to files and replace the original ones. IMPORTANT: Be sure to perform back up of template files before replacing.
Refresh your site. You have removed cufon fonts:
Now you should add Google fonts. Open Google fonts page. Select an appropriate font, Click Add to Collection, click Use after that:
Select an appropriate character set:
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:
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:
Go to Appearance – Editor and open style.css file. Copy @import code and add it at the beginning of css file:
Locate css code for the appropriate element. Add font-family property:
Save changes and refresh the page. We have added Google font for menu:
Let’s add Google font for titles.
Inspect the title. We can see that appropriate code is located in themeXXX/css/normalize.css file:
Add @import reference to google font. Add font-family property. Save changes and upload the modified file:
Save changes and upload the modified file. Refresh the page. You have added Google font for titles:
You can perform the same actions to the rest titles/text.
Feel free to check the detailed video tutorial below: