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

WordPress. How to add Google WEB font

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