[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

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