Categories

Featured templates

WordPress. How to add Google WEB font

Ryan DeWitt May 14, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

This tutorial shows how to add a Google WEB font to a WordPress template based on Cherry Framework.

WordPress. How to add Google WEB font

  1. In Cherry options, we can see a list of fonts. We are going to add one more font.

    WordPress_How_to_add_Google_WEB_font-1

  2. Go to Appearance -> Editor. Open the options.php file for editing. Search for the following code:

    $typography_mixed_fonts = array_merge( options_typography_get_os_fonts() , options_typography_get_google_fonts() );

    You can usually find it under the // Fonts comment.

    WordPress_How_to_add_Google_WEB_font-2

  3. Open the Google Web fonts page, select the desired font and add it to Collection. Click the Use button.

    WordPress_How_to_add_Google_WEB_font-3

  4. Open the @import tab and you will see a CSS font import code. In our case it is Domine, serif is the font family.

    WordPress_How_to_add_Google_WEB_font-4

  5. In the options.php file you should add the following code:

    $typography_mixed_fonts["Domine, serif"] = "Domine *"; 

    before:

    asort($typography_mixed_fonts); 
  6. In this code "Domine, serif" is the font family, "Domine *" is the font name that will appear in Cherry options. The modified file should look like on the screenshot below. Save the changes.

    WordPress_How_to_add_Google_WEB_font-5

  7. Open the themeXXXXX/style.less file with any text/code editor. Copy the @import code and paste it at the beginning of the style.less file. Save the changes and upload the modified file, replacing the original one.

    WordPress_How_to_add_Google_WEB_font-6

  8. Refresh the page. We have added a Google Web font. Now you can see it under Cherry fonts options.

    WordPress_How_to_add_Google_WEB_font-7

Feel free to check the detailed video tutorial below:

WordPress. How to add Google WEB font

Classy Wordpress Themes
This entry was posted in WordPress Tutorials and tagged add, Cherry, font, framework, google. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket